Angular点击创建用户按钮时返回Observable前添加表单校验问题咨询

1. 现有实现的问题与缺陷 #

现有代码逻辑存在明显漏洞，直接导致校验不通过仍发起接口请求的问题，核心问题如下：

• checkInputs 函数没有返回布尔值标识校验结果，即使校验触发错误提示执行return，也只是退出checkInputs本身，完全不会阻止createUser内后续的接口请求逻辑执行
• 逻辑顺序错误，createUser中执行checkInputs后没有做任何结果判断，直接标记加载状态、发起接口请求
• 冗余的按钮监听逻辑：没必要用fromEvent手动监听按钮点击，Angular原生的(click)事件绑定更简洁易维护，现有写法反而增加了代码理解成本

2. 修复方案 #

第一步：改造checkInputs函数，返回布尔值标识校验是否通过 #

checkInputs(): boolean {
  if(this.userStatus == 'USER_ON_NO_ACCOUNT') {
    if(!this.modelForm.get('firstName').value) {
      this.notificationService.showError('First Name is required.');
      return false;
    }
    if(!this.modelForm.get('lastName').value) {
      this.notificationService.showError('Last Name is required.');
      return false;
    }
    if(!this.modelForm.get('companyName').value) {
      this.notificationService.showError('Company Name is required.');
      return false;
    }
  }
  
  if(!this.modelForm.get('roleId').value) {
    this.notificationService.showError('Security Role is required.');
    return false;
  }

  if(this.modelForm.get('roleId').value && this.modelForm.get('roleId').value !== 7 && !this.modelForm.get('isSso').value) {
    this.notificationService.showError('SSO is required.');
    return false;
  }

  if(this.modelForm.get('roleId').value && this.modelForm.get('isSso').value && this.modelForm.get('isSso').value ==='Yes' && !this.modelForm.get('ssocredentials').value) {
    this.notificationService.showError('SSO Credential is required.');
    return false;
  }

  if(this.modelForm.get('isSso').value ==='No') {
    this.modelForm.get('ssocredentials').setValue(null);
  }
  // 所有校验通过返回true
  return true;
}

第二步：调整createUser逻辑，校验不通过时阻断请求 #

需要先从rxjs引入EMPTY：import { EMPTY } from 'rxjs';

createUser(): Observable<any> {
  // 先标记表单所有字段为触碰状态，触发原生表单样式提示
  this.modelForm.markAllAsTouched();
  // 校验不通过直接返回空可观察对象，不会发起接口请求
  if (!this.checkInputs()) {
    return EMPTY;
  }
  this.isInProgress = true;
  return this.accountService.create(this.modelForm.value).pipe(
      finalize(() => (this.isInProgress = false))
  );
}

可选优化：替换冗余的按钮监听逻辑 #

直接用Angular原生(click)绑定，删除@ViewChild、ngAfterViewInit内的fromEvent相关代码，更符合Angular开发规范：

<button mat-flat-button color="primary" (click)="createUser().subscribe(this.handleResponse())" [disabled]="isInProgress">Create User</button>

内容的提问来源于stack exchange，提问作者Ananya Amar