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

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]'

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