Angular AsyncValidatorFn数字校验mat-error不显示问题

需求背景 #

实现自定义数字校验规则，用户输入时实时校验输入值是否包含数字，不满足规则时通过mat-error组件展示对应错误提示。

问题相关代码 #

自定义异步校验函数 #

private checkIfNum(): AsyncValidatorFn {
  return (control: AbstractControl): Observable<ValidationErrors | null> => {
    const value = control.value;
    const numbersValidation = /\d/;
    if (!control.value) {
      return of({ numValid: 1 });
    }
    if (value.match(numbersValidation)) {
      console.log(of({ numValid: null }));
      return of({ numValid: null });
    } else {
      return of({ numValid: 1 });
    }
  };
}

HTML模板代码 #

<input #newPassword placeholder="*****" type="text" class="formField" formControlName="newPassword" matInput />
<mat-error *ngIf="changePassForm.controls.newPassword.hasError('minlength')">Password should be at least 8 symbols long</mat-error>
<mat-error *ngIf="changePassForm.controls.newPassword.errors?.numValid">Password should include at least one number</mat-error>

表单控件定义 #

newPassword: new FormControl("", userValidators.password, this.checkIfNum()), 

现存问题 #

• 「密码需包含至少一个数字」的错误提示始终无法展示
• checkIfNum()校验函数仅在minlength校验规则通过时才会触发

核心原因1：异步校验器的默认触发逻辑 #

Angular响应式表单的校验执行顺序固定：

1. 优先执行所有同步校验器
2. 只有全部同步校验器校验通过（返回null），才会执行异步校验器
   你当前把数字校验写成了异步校验器，所以必然要等minlength等同步规则全部通过后才会执行，这是框架默认行为，不是代码bug。

核心原因2：校验函数返回值格式错误 #

Angular校验器的返回值规则是硬性要求：

• 校验通过：必须直接返回null
• 校验不通过：返回格式为{ 错误标识: 任意truthy值 }的对象
  你现有代码在匹配到数字（校验通过）时返回的是of({ numValid: null })，这是一个对象而非null，Angular会判定为校验不通过；空值判断时也错误返回了错误对象，和其他同步校验逻辑冲突。

最优修复方案 #

你的数字校验是纯同步正则判断，没有任何异步逻辑（接口请求、延时等），完全不需要写成异步校验器，改成同步校验器即可解决触发时机问题，同时修正返回值格式。

第一步：改写为同步校验器 #

// 去掉AsyncValidatorFn和Observable包装，改为普通同步校验器
private checkIfNum(): ValidatorFn {
  return (control: AbstractControl): ValidationErrors | null => {
    const value = control.value?.trim();
    // 空值不做数字规则校验，交给Validators.required等同步规则处理
    if (!value) return null;
    // 校验通过返回null，不通过返回标准错误对象
    return /\d/.test(value) ? null : { numValid: true };
  };
}

第二步：调整FormControl定义，将校验器加入同步校验组 #

// 注意：同步校验器要放在第二个参数的数组里，第三个参数仅放真正有异步逻辑的校验器
newPassword: new FormControl(
  "", 
  [
    userValidators.password, // 确认该校验器内部已包含minLength(8)规则，否则需手动添加Validators.minLength(8)
    this.checkIfNum()
  ]
),

补充说明 #

如果确实需要保留异步校验的写法（比如后续要加接口请求逻辑），除了修正返回值格式外，需要注意异步校验只有同步规则全过才会触发，对应错误提示也只会在同步规则无错时展示，不符合多错误同时提示的交互需求，因此纯同步规则不要用异步校验器实现。 #

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