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

Мой лучший выбор в том, что вы не bootstraped Угловая касаемо формы:

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

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

Вы можете увидеть это plunk - он делает вывод "validate" на консоль.

Answer 2

я раздвоенный и улучшил @batesiiic «s звенеть:

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

Метод https://plnkr.co/edit/Vokcid?p=preview Validate() должна возвращать нулевое значение, если вход правилен, в противном случае она возвращает объект {ключ: значение, ... } где ключ - это тип ошибки, и значение может быть любым, что вы можете использовать в своем шаблоне для генерации сообщения об ошибке.

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

}