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

<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

Answer 2

如果用户尚未与表单进行交互，则

原始为真。您可能想要检查脏？您还可以使用hidden代码并替换

<div *ngIf="employeeDob.pristine">

使用：

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

Answer 3

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

您可能想要使用

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

（对于旧表单模块）

在Angular 2中，当我尝试使用双向绑定时，ngIF无效

3 个答案: