Angular：自定义验证器没有触发答案

【问题标题】：Angular: custom validator isn't firingAngular：自定义验证器没有触发
【发布时间】：2021-07-28 10:33:18
【问题描述】：

我正在尝试为模板驱动的表单定义自定义验证器。我正在提供一个指令：

@Directive({
  selector: '[ng-foo-validator]',
  providers:
      [{provide: NG_VALIDATORS, useExisting: forwardRef(() => FooValidator), multi: true}]
})
class FooValidator implements Validator {
  validate(c: AbstractControl) {
    debugger;
    return c.value && c.value.fooField === 'foo' ? null : {notFoo: true};
  }
}

然后，在我的组件中，我尝试使用 ng-foo-validator 指令：

@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 方法永远不会触发。我做错了什么？

【问题讨论】：

标签： angular angular-directive

【解决方案1】：

问题是我的指令没有在app.module.ts 中声明：

declarations: [
  NgModelFooValidator,
  FooValidator,
],

调试此问题的一个好方法是使指令影响元素的某些可见属性。我把它放在指令构造函数上：

constructor(el: ElementRef) {
  el.nativeElement.style.backgroundColor = 'yellow';
}

这清楚地表明了指令是否正在构建。

【讨论】：