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
>

我的问题是，当验证器被初始化时，即初始化＆＃39;登录到控制台，永远不会调用验证功能，即“验证”＃39;在输入字段中输入时，永远不会记录到控制台。由于验证器已初始化，我认为我已经连接了＃34;一切都正确。那么缺少什么？

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（）方法必须返回null，否则返回一个对象{key：value，...}，其中key是错误的类型，value可以是您可以在模板中使用的任何值生成错误消息。

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

Answer 3

而不是将自定义验证器函数编写为类/组件/指令方法，在组件/指令之外编写自定义验证器应该可以工作。

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自定义验证程序未调用

3 个答案: