Angular表单加载时如何等待异步校验器完成以判断表单是否无效

问题原因 #

• statusChanges 事件默认仅在表单值发生变更后才触发，不会主动推送表单初始化后的初始状态
• 手动调用updateValueAndValidity()后状态卡在PENDING，是因为异步校验器还未执行完成，此时读取的是校验未结束的中间状态，需等待异步校验返回最终结果后才能拿到VALID/INVALID状态

解决方案 #

方案1：使用RxJS操作符调整状态订阅逻辑 #

导入所需的RxJS操作符：

import { startWith, filter } from 'rxjs';

修改statusChanges订阅代码，手动注入初始状态并过滤掉中间PENDING状态：

ngOnInit() {
  this.signupForm = this.fb.group({
    name: [
      'Prasad P',
      [Validators.required, Validators.maxLength(3)],
      ValidateUserNotTaken.createValidator(this.signupService)
    ],
    email: [
      '',
      [Validators.required, Validators.email],
      ValidateEmailNotTaken.createValidator(this.signupService)
    ]
  });

  // 调整后的状态监听逻辑
  this.signupForm.statusChanges
    .pipe(
      // 注入表单初始状态，触发第一次执行
      startWith(this.signupForm.status),
      // 过滤掉校验中的PENDING状态，仅处理校验完成后的最终状态
      filter(status => status !== 'PENDING')
    )
    .subscribe(status => {
      alert('Form Status Is ' + status);
      if(status === 'INVALID') {
        // 执行自定义操作 do_stuff();
      }
    });
}

方案2：手动触发全表单校验 #

如果需要强制触发校验，可在表单创建完成后调用updateValueAndValidity，并正确配置参数确保事件触发：

// 表单创建完成后添加以下代码
this.signupForm.updateValueAndValidity({
  emitEvent: true,
  onlySelf: false
});

注意：调用后不要立刻读取表单状态，需通过statusChanges订阅接收异步校验完成后的最终状态

内容的提问来源于stack exchange，提问作者Prasad Parab