Angular多阶段表单校验问题：实时/失焦/提交多场景校验不生效

现有代码异常原因 #

你当前的实现会触发异常的核心原因是：调用setValidators动态修改校验规则后，没有手动调用对应表单控件的updateValueAndValidity()方法，Angular不会自动重新计算控件的校验状态，导致规则更新不生效。此外手动增删校验器的维护成本极高，不符合Angular响应式表单的设计逻辑。

最优实现方案 #

Angular响应式表单原生支持通过updateOn配置指定校验触发时机，无需手动增删校验规则，直接在初始化控件时配置即可，支持三种触发时机：

• change：字段值变化时实时校验（默认值）
• blur：字段失焦时校验
• submit：仅在表单提交时校验

按照你的需求改造后的代码如下：

constructor(
  private changeDetectorRef: ChangeDetectorRef,
  private el: ElementRef,
  private _snackBar: MatSnackBar ) {
  this.form = new FormGroup({
    // 仅提交时校验的字段
    firstname: new FormControl('', {
      validators: [Validators.required, Validators.minLength(2)],
      updateOn: 'submit'
    }),
    lastname: new FormControl('', {
      validators: [Validators.required, Validators.minLength(2)],
      updateOn: 'submit'
    }),
    // 实时校验的字段
    title: new FormControl('', Validators.required),
    // 失焦时校验的字段
    email: new FormControl('', {
      validators: [Validators.required, Validators.pattern('^[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+.[a-zA-Z0-9-.]+$')],
      updateOn: 'blur'
    }),
    phoneNumber: new FormControl('', {
      validators: [Validators.required, Validators.pattern('^[0-9]*$')],
      updateOn: 'blur'
    }),
    // 仅提交时校验的字段
    termsAndConditions: new FormControl('', {
      validators: [Validators.required],
      updateOn: 'submit'
    })
  });
  this.changeDetectorRef.markForCheck();
}

onSubmit() {
  // 直接判断表单有效性即可，Angular会自动触发所有字段的校验
  if (this.form.invalid) {
    return;
  }
  // 后续业务逻辑
}

onCancelBtnClick() {
  this.form.reset();
}

原有写法的临时修复方案 #

如果你需要保留现有手动增删校验的逻辑，只需要在修改校验规则后补充触发校验状态更新的调用即可：

addValidation() {
  this.form.controls['firstname'].setValidators([Validators.required, Validators.minLength(2)]);
  this.form.controls['lastname'].setValidators([Validators.required, Validators.minLength(2)]);
  // 新增以下两行触发状态更新
  this.form.controls['firstname'].updateValueAndValidity();
  this.form.controls['lastname'].updateValueAndValidity();
}

内容的提问来源于stack exchange，提问作者Thomas Allert