Пользовательский валидатор 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 никогда не вызывается, то есть "validate" никогда не регистрируется на консоли при вводе в поле ввода. Так как валидатор инициализирован, я предполагаю, что я все "правильно подключил". Так чего не хватает?

Answer 1

Лучше всего, что вы не загрузили Angular в отношении форм:

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

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

Вы можете увидеть этот план - он выводит "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, ... }, где ключ - это тип ошибки, а значение может быть любым, что вы можете использовать в своем шаблоне для генерации сообщение об ошибке.

Шаблон также содержит 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')
    }

}