在Angular 2中，當我嘗試使用雙向綁定時，ngIF不起作用

我正在與Angular2一起使用雙向綁定概念[(ngModel)]。我用我的頁面創建了窗體，並且必須驗證元素的原始狀態。所以爲了驗證，我用ngIf來檢查元素的原始狀態。但條件不起作用。我需要檢查每個模型更改的原始狀態。下面是我app.component.html頁：在Angular 2中，當我嘗試使用雙向綁定時，ngIF不起作用

<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>

這是我的組件：

export class AppComponent { 

employeeDob: String; 

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

感謝您的任何建議，如果用戶不互動與形式尚未

來源

2016-08-01 Sasi Dhivya

pristine是Control的不是value的屬性。

您可能需要使用

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

（舊形式的模塊）

來源

2016-08-01 08:08:49

感謝您的建議。它的作品現在 –

原始的是真的。你可能想檢查骯髒的而不是？您也可以使用hidden標籤，取而代之的

<div *ngIf="employeeDob.pristine">

：

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

來源

2016-08-01 08:06:01

呀感謝很多。但隱藏標籤也不起作用 –

<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>

直失控文檔

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

來源

2016-08-01 08:29:39 Kyrsberg

謝謝，但這拋出模板解析錯誤 –

例外：模板解析錯誤：沒有指令「exportAs」設置爲「ngModel」（「」class =「form-control」id =「employeeDob」[（ngModel ）] =「employeeDob」name =「employeeDob」[ERROR - >]＃employeeDob =「ngModel」required /> –

您使用的角度是什麼版本？我認爲這是固定在較新的版本中 https：// github。 com/angular/angular/issues/9363 – Kyrsberg

在Angular 2中，當我嘗試使用雙向綁定時，ngIF不起作用

回答

相關問題