ngx-formly异步校验消息不显示问题求助

核心修复步骤 #

1. 修正异步校验器的返回格式 #

异步校验器必须返回包含错误标识键的对象，而非直接返回字符串。校验不通过时，需返回带键的错误对象，让formly能识别并关联提示消息：

// 正确的异步校验器实现
uniqueUsernameValidator(control: AbstractControl): Promise<ValidationErrors | null> {
  return new Promise((resolve) => {
    setTimeout(() => {
      const takenUsernames = ['admin', 'test'];
      // 校验不通过时返回带键的错误对象
      resolve(takenUsernames.includes(control.value) ? { unique: 'This username is already taken.' } : null);
    }, 100);
  });
}

2. 字段配置中关联校验键与提示消息 #

在字段的validation.messages里，将校验器返回的错误键（比如unique）和提示消息绑定，确保键名完全一致：

fields: FormlyFieldConfig[] = [
  {
    key: 'username',
    type: 'input',
    props: {
      label: 'Username',
      required: true,
    },
    validators: {
      validation: [this.uniqueUsernameValidator],
    },
    validation: {
      messages: {
        // 关联错误键与显示消息
        unique: (error) => error.unique,
      },
    },
  },
];

3. 确认模块依赖配置正确 #

确保AppModule中已导入ReactiveFormsModule和对应UI适配的Formly模块（如FormlyBootstrapModule），否则提示消息无法正常渲染：

@NgModule({
  imports: [
    ReactiveFormsModule,
    FormlyModule.forRoot(),
    FormlyBootstrapModule, // 根据你的UI框架选择对应模块
  ],
})
export class AppModule {}

4. 验证控件状态变化 #

异步校验触发时，控件状态会变为PENDING，校验完成后变为INVALID（不通过）或VALID（通过）。可在模板中添加{{ form.status }}观察状态，确认校验逻辑是否正常执行。

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