ฟอร์ม - ตัวตรวจสอบเฉพาะทางของ Angular2 ไม่ถูกเรียก

ฉันได้เขียนไดเรกทีฟการตรวจสอบแบบกำหนดเองดังนี้:

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’ ไม่เคยถูกบันทึกลงในคอนโซล เมื่อพิมพ์ในช่องกรอกข้อมูล เนื่องจากตัวตรวจสอบถูกเริ่มต้นใช้งานแล้ว ฉันจึงคิดว่าฉันได้เชื่อมทุกอย่างอย่างถูกต้องแล้ว ดังนั้นสิ่งที่หายไปคืออะไร?

คำตอบ #1

สิ่งที่ฉันคิดว่ามากที่สุดคือคุณยังไม่ได้บูตสแตรป Angular เกี่ยวกับฟอร์ม:

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

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

คุณสามารถเห็น plunk นี้ - มันจะแสดงผล "validate" บนคอนโซล

คำตอบ #2

ฉันได้แยกส่วนและปรับปรุง plunk ของ @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 เพื่อแสดงข้อความข้อผิดพลาดหากข้อมูลที่ป้อนไม่ถูกต้อง