Angular2 (rc.5) ein Formular Einstellung mit einem benutzerdefinierten Validator auf ungültig

Question

ich mit einem benutzerdefinierten Validator auf einem der Felder ein Template-driven Form bin mit:

<button type="button" (click)="myForm.submit()" [disabled]="!myForm.valid" class="btn">Save</button> 
<form #myForm="ngForm" (ngSubmit)="submit()"> 
    ... 
    <input type="text" 
       class="validate" 
       [(ngModel)]="myDate" 
       name="myDate" 
       ngControl="myDate" 
       myValidator/> 
</form> 

MyValidator:

import { Directive, forwardRef } from '@angular/core' 
import { NG_VALIDATORS, FormControl, Validator } from '@angular/forms' 

function check(s: string) { 
    ... 
} 

function customValidation() { 
    return (c: FormControl) => { 
    return check(c.value) ? null : { 
     myValidator: false 
    } 
    } 
} 


@Directive({ 
    selector: '[myValidator ][ngModel],[myValidator ][formControl]', 
    providers: [ 
    { provide: NG_VALIDATORS, useExisting: forwardRef(() => MyValidator), multi: true } 
    ] 
}) 
export class MyValidator implements Validator { 

    validator: Function 

    constructor() { 
    this.validator = customValidation() 
    } 

    validate(c: FormControl) { 
    return this.validator(c) 
    } 
} 

Alles funktioniert gut auf dem Feld. Die einzigen Probleme treten auf, wenn der Validierer das Feld auf ungültig setzt, das Formular nicht auf ungültig gesetzt ist und somit die Schaltfläche zum Speichern nicht deaktiviert ist. Ich kann nicht genau verstehen warum. Ich glaube, ich habe eine Verbindung zwischen dem Validator und dem Formular vergessen.

ich angular_forms bin mit 0.3.0

Hier ist ein plunkr: http://plnkr.co/edit/qUKYGFNLyjh6mNiqYY5I?p=preview, die wirklich zu funktionieren scheint ... (rc.4 obwohl)

Answer 1

Ich habe den Code in plunkr setzen.

http://plnkr.co/edit/qUKYGFNLyjh6mNiqYY5I?p=preview

Und es funktioniert gut. Sie können dies mit anderen Teilen Ihres Codes überprüfen. Speziell habe ich meine eigene Prüfung Funktion.

function check(s: string) { 
    if(s.length > 0){ 
    return true; 
    }else{ 
    return false; 
    } 
} 

Haben Sie den myDate-Wert initialisiert? Wenn es nicht initialisiert ist, habe ich beim Start ein gültiges Formular erhalten.

ngOnInit() { 
    this.myDate = '' 
    }