In Angular 2, funktioniert ngIF nicht, wenn ich versuche mit Zwei-Wege-Bindung

Question

Ich arbeite mit Angular2 mit Zwei-Wege-Bindung Konzept [(ngModel)]. Ich habe Formular mit meiner Seite und ich muss den ursprünglichen Zustand des Elements validieren. Zur Validierung habe ich ngIf verwendet, um den ursprünglichen Zustand des Elements zu überprüfen. Aber die Bedingung funktioniert nicht. Ich muss den ursprünglichen Zustand für jeden Modellwechsel überprüfen. Unten ist meine app.component.html Seite:

<form (ngSubmit)="angular2form(myAngular2Form.employeeDob)" [ngFormModel]="myAngular2Form"> 

<input type="text" class="form-control" id="employee" name="employee" [(ngModel)]="employeeDob" required />    
    <div *ngIf="employeeDob.pristine"> 
    <p>Please enter the date</p> 
</div> 
<button type="submit" class="btn btn-primary">Register</button> 

</form> 

Dies ist meine Komponente:

export class AppComponent { 

employeeDob: String; 

    constructor(private myform: FormBuilder) { 
    this.employeeDob = ''; 
} 
angular2form(date) { 
    alert("date submitted successfully"); 
} 
} 

Vielen Dank für jede Anregung

Answer 1

pristine ist eine Eigenschaft der Control nicht der value.

Sie könnten

<input #employeeDobCtrl="ngForm" type="text" class="form-control" id="employee" name="employee" [(ngModel)]="employeeDob" required />   
<div *ngIf="employeeDobCtrl.pristine">  

(für die alten Formen Modul)

Answer 2

pristine ist wahr, wenn der Benutzer nicht mit der Form noch interagierten. Sie möchten wahrscheinlich nach dreckig suchen? Sie können auch den hidden-Tag verwenden und

<div *ngIf="employeeDob.pristine"> 

mit ersetzen:

<div [hidden]="employeeDob.pristine"> 

Answer 3

<input type="text" class="form-control" id="employee" name="employee" [(ngModel)]="employeeDob" #date="ngModel" required />
<div [hidden]="date.valid || date.pristine"> <p>Please enter the date</p> </div>

gerade outta Dokumentation

https://angular.io/docs/ts/latest/guide/forms.html