自定义验证器不在模板驱动的表单中工作

Question

我想在我的 angular 项目中的模板驱动表单中添加自定义验证器，但 ngModel 似乎没有注册自定义验证器。 你知道可能是什么问题吗？

验证者

import { Directive } from '@angular/core';
import { AbstractControl, FormControl, NG_VALIDATORS, Validator, ValidatorFn } from '@angular/forms';

function usernameExistsFactory(): ValidatorFn {
  return (c: AbstractControl) => {
    let isValid = c.value === 'Juri';

    if (isValid) {
      return null;
    } else {
      return {
        usernameExists: true
      };
    }
  };
}
@Directive({
    selector: 'usernameExistsValidator',
    providers: [
      { provide: NG_VALIDATORS, useExisting: usernameExistsValidator, multi: true }
    ]
  })
  export class usernameExistsValidator implements Validator {
    validator: ValidatorFn;
    
    constructor() {
      this.validator = usernameExistsFactory();
    }
    
    validate(c: FormControl) {
      return this.validator(c);
    }
    
  }

输入元素

<input (change)="log(name)" required usernameExistsValidator ngModel minlength="3" maxlength="32" name="name" #name="ngModel" type="text"  class="form-control" id="name">

记录的ngModel

Answer 1

当您为指令使用属性选择器时，我们需要记住使用括号[....] ，因此将指令选择器修改为：

selector: '[usernameExistsValidator]'

当您想要使用属性选择器时，这适用于所有情况，因此不仅适用于这种情况。