在 Angular 2 中，当我尝试使用双向绑定时 ngIF 不工作

Question

我正在使用具有双向绑定概念的 Angular2 [(ngModel)]。我的页面有表单，我必须验证元素的原始状态。因此，为了验证，我使用了 ngIf 来检查元素的原始状态。但条件不工作。我需要检查每个模型更改的原始状态。下面是我的 app.component.html 页面：

 <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");
 }
 }

感谢任何建议

Answer 1

如果用户尚未与表单交互，则为 true。您可能想改为检查 dirty？您还可以使用 hidden 标签并替换

<div *ngIf="employeeDob.pristine">

与：

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

Answer 2

pristine 是 Control 的属性而不是 value.

您可能想使用

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

（旧表单模块）

Answer 3

<输入类型="text"class="form-control"id="employee"name="employee"[(ngModel)]= "employeeDob" #date="ngModel" 必填 /><br> <div [隐藏]="date.valid || date.pristine"> <p>请输入日期</p> </div>

直接输出文档

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

在 Angular 2 中，当我尝试使用双向绑定时 ngIF 不工作

In Angular 2, ngIF is not working when i am trying with two way binding

angularjs

typescript

angular2-forms

angular2-template

angular