在 Angular 2 中，当我尝试使用两种方式绑定时，ngIF 不起作用

Posted 2023-03-13

【中文标题】在 Angular 2 中，当我尝试使用两种方式绑定时，ngIF 不起作用

【英文标题】：In Angular 2, ngIF is not working when i am trying with two way binding

【发布时间】：2016-12-06 05:30:22

【问题描述】：

我正在使用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");
 
 

感谢您的建议

【参考方案1】：

<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

【讨论】：

例外：模板解析错误：没有将“exportAs”设置为“ngModel”的指令（“”class="form-control" id="employeeDob" [(ngModel)]="employeeDob " name="employeeDob" [错误 ->]#employeeDob="ngModel" 需要 />

您使用的是什么版本的 Angular？我认为这在较新的版本中已修复。 github.com/angular/angular/issues/9363

我正在使用 angular - common/core 2.0.0-rc.1"

可悲的是，我相信我的答案仅适用于 rc.3 及更高版本

【参考方案2】：

pristine 是 Control 的属性，而不是 value 的属性。

你可能想使用

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

（对于旧的表单模块）

【参考方案3】：

如果用户

尚未与表单交互

，

pristine 为真。您可能想改为检查 dirty 吗？也可以使用hidden标签替换

<div *ngIf="employeeDob.pristine">

与：

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