未调用 Angular2 自定义验证器

Question

我写了一个这样的自定义验证指令：

const DURATION_VALIDATOR = new Provider(
    NG_VALIDATORS,
    {useExisting: forwardRef(() => DurationDirective), multi: true}
);


@Directive({
    selector: '[ngModel][duration], [formControl][duration]',
    providers: [{
        provide: NG_VALIDATORS,
        useExisting: forwardRef(() => DurationDirective),
        multi: true }]
})
export class DurationDirective  implements Validator{
    constructor(public model:NgModel){
        console.error('init')
    }
    validate(c:FormControl) {
        console.error('validate')
        return {'err...':'err...'};
    }
}

我的 Html 看起来像这样：

<input 
    type="text"
    [(ngModel)]="preparation.duration"
    duration 
    required
>

我的问题是，当验证器被初始化时，即 'init' 被记录到控制台，验证函数从未被调用，即 'validate' 从未被记录到控制台，当输入输入字段。由于验证器已初始化，我假设我 "wired" 正确设置了所有内容。那么缺少什么？

Answer 1

我最好的赌注是你还没有引导 Angular 关于表单：

import { App } from './app';
import { disableDeprecatedForms, provideForms } from '@angular/forms';

bootstrap(App, [
    // these are crucial
    disableDeprecatedForms(),
    provideForms()
  ]);

您可以看到这个 plunk - 它会向控制台输出 "validate"。

Answer 2

我分叉并改进了@batesiiic 的代码：https://plnkr.co/edit/Vokcid?p=preview

validate(c:FormControl) {
    console.error('called validate()')
    return parseInt(c.value) < 10 ? null : {
      duration: {message: 'Please enter a number < 10'}
    };
}

如果输入有效，validate() 方法必须 return null，否则，它 return 是一个对象 { key: value, ... } 其中 key 是错误类型值可以是您可以在模板中用来生成错误消息的任何内容。

该模板还包含一个 div，用于在输入无效时显示错误消息。

Answer 3

而不是将自定义验证器函数编写为 class/component/Directive 方法，在 component/Directive 之外编写自定义验证程序应该可行。

validate(c:FormControl) {
    console.error('validate')
    return {'err...':'err...'};
}

@Directive({
    selector: '[ngModel][duration], [formControl][duration]',
    providers: [{
        provide: NG_VALIDATORS,
        useExisting: forwardRef(() => DurationDirective),
        multi: true }]
})
export class DurationDirective  implements Validator{
    constructor(public model:NgModel){
        console.error('init')
    }

}

未调用 Angular2 自定义验证器

Angular2 custom validator not called

forms

validation

custom-validators

typescript

angular