ng-dynamic-forms结合Material组件：异步验证错误信息延迟显示问题

我之前也碰到过一模一样的情况，Angular Material默认的错误提示逻辑确实会给异步校验的错误信息加上显示限制，咱们一步步来解决：

问题根源 #

Angular Material自带的ErrorStateMatcher默认规则是：只有当表单控件无效，并且控件被触摸过（touched）或者表单已提交时，才会渲染错误信息。而异步校验一般在用户输入过程中就触发了，但此时控件可能还没被标记为touched（用户还没点击输入框再离开），所以哪怕校验返回了错误、表单状态变成INVALID，错误提示也不会立刻冒出来。

解决方案1：自定义错误状态匹配器（推荐） #

我们可以自己写一个ErrorStateMatcher，让它在异步校验返回确定错误时，不管控件有没有被触摸，都显示错误信息：

1. 创建自定义匹配器类 #

import { ErrorStateMatcher } from '@angular/material/core';
import { FormControl, FormGroupDirective, NgForm } from '@angular/forms';

export class AsyncErrorStateMatcher implements ErrorStateMatcher {
  isErrorState(control: FormControl | null, form: FormGroupDirective | NgForm | null): boolean {
    const isSubmitted = form?.submitted ?? false;
    // 规则：控件无效，且（已触摸 / 表单已提交 / 存在非pending的错误）
    return !!(control && control.invalid && (
      control.touched || 
      isSubmitted || 
      (control.errors && Object.keys(control.errors).some(key => key !== 'pending'))
    ));
  }
}

这里特意排除了pending状态（异步校验进行中），避免校验还没完成就乱弹错误。

2. 在动态表单配置中应用匹配器 #

在你的Ng Dynamic Forms字段配置里，给需要异步校验的字段绑定这个匹配器：

import { AsyncErrorStateMatcher } from './path-to-your-matcher-file';

// 示例表单模型
export const yourFormModel = [
  {
    id: 'uniqueUsername',
    type: 'INPUT',
    label: '用户名',
    validators: {
      async: [yourUsernameUniqueValidator] // 你的异步校验器
    },
    // 绑定自定义错误状态匹配器
    errorStateMatcher: new AsyncErrorStateMatcher()
  }
];

解决方案2：异步校验器中手动标记控件为touched #

如果你不想自定义匹配器，也可以在异步校验器返回错误时，手动把控件标记为touched，这样就能触发默认的错误显示逻辑：

import { AbstractControl, AsyncValidatorFn, ValidationErrors } from '@angular/forms';
import { Observable, map } from 'rxjs';
import { UserService } from './user.service';

export function usernameUniqueValidator(userService: UserService): AsyncValidatorFn {
  return (control: AbstractControl): Observable<ValidationErrors | null> => {
    return userService.checkUsernameExists(control.value).pipe(
      map(exists => {
        if (exists) {
          // 标记控件为已触摸
          control.markAsTouched();
          return { usernameExists: true };
        }
        return null;
      })
    );
  };
}

这个方法更直接，但会让控件提前进入touched状态，可能在用户还没交互时就显示错误，适合对交互体验要求不那么严格的场景。

验证效果 #

配置完成后，当异步校验返回错误时，错误信息应该会立刻显示出来，不用等用户再次聚焦字段啦。

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