forme - Validator personalizat Angular2 nu este apelat

Am scris o directivă de validare personalizată astfel:

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-ul meu arată astfel:

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

Problema mea este că, în timp ce validatorul este inițializat, adică 'init' este afișat în consolă, funcția validate nu este niciodată apelată, adică 'validate' nu este niciodată afișat în consolă, atunci când tastez în câmpul de input. Deoarece validatorul este inițializat, presupun că am conectat totul corect. Deci ce lipsește?

Răspuns #1

Cea mai bună presupunere a mea este că nu ați inițializat Angular în ceea ce privește formularele:

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

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

Poți vedea acest plunk - acesta afișează "validate" în consolă.

Răspunsul #2

Am bifurcat și am îmbunătățit plunk-ul lui @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'}
    };
}

Metoda validate() trebuie să returneze null dacă inputul este valid, altfel, returnează un obiect { key: value, ... } unde key este tipul erorii și value poate fi orice poți folosi în șablonul tău pentru a genera un mesaj de eroare.

Șablonul conține de asemenea un div pentru a afișa mesajul de eroare dacă intrarea nu este validă.