Angular模板驱动表单自定义校验器validate方法不触发如何解决？

问题原因 #

• 未将FormsModule导入到当前组件所在的NgModule中，模板驱动表单的所有能力（包括ngModel绑定、校验触发）都依赖该模块
• 自定义FooValidator指令未在NgModule的declarations数组中注册，Angular无法识别模板中使用的ng-foo-validator指令
• 自定义指令未添加export关键字，无法在NgModule中导入注册
• 校验逻辑存在笔误：当前input绑定的控件值为输入的字符串本身，不需要访问.fooField属性，该错误会导致即使校验触发也返回错误结果

修复步骤 #

1. 调整自定义指令代码 #

给指令添加export关键字，同时修正校验逻辑：

@Directive({
  selector: '[ng-foo-validator]',
  providers: [
    {provide: NG_VALIDATORS, useExisting: forwardRef(() => FooValidator), multi: true}
  ]
})
// 添加export关键字
export class FooValidator implements Validator {
  validate(c: AbstractControl) {
    debugger;
    // 直接判断控件值即可，不需要访问fooField属性
    return c.value === 'foo' ? null : {notFoo: true};
  }
}

2. 配置NgModule #

确保所在NgModule导入FormsModule，同时注册自定义指令和组件：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
// 导入你的自定义指令和组件
import { FooValidator } from './foo.validator';
import { NgModelFooValidator } from './foo.component';

@NgModule({
  imports: [
    BrowserModule,
    // 必须导入FormsModule才能使用模板驱动表单能力
    FormsModule
  ],
  // 注册自定义指令和组件
  declarations: [FooValidator, NgModelFooValidator],
  bootstrap: [NgModelFooValidator]
})
export class AppModule { }

3. 组件代码无需额外调整，原写法保持即可 #

@Component({
  selector: 'ng-model-foo-validator',
  template: `
    <br><br>
    <b>Here's a form with a custom validator!</b>
    <form>
      <input name="fooField" ngModel ng-foo-validator>
    </form>
  `
})
export class NgModelFooValidator {
}

完成以上调整后，输入框内容变更时就会触发validate方法。

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