Angular 4表单验证 - 导出ngModel

时间:2017-11-03 23:22:13

标签: angular ionic3 angular4-forms

我想要使用Angular Forms验证验证一个简单的输入控件,例如

<form>
<ion-input type="tel" id="phoneNumber" name="phoneNumber" required [(ngModel)]="phoneNumber" maxlength="10" minlength="10"
  placeholder="Touch here to enter a phone number" class="form-control">
</ion-input>
<p *ngIf="!phoneNumber.pristine && phoneNumber.errors.required" style="color:red;">
  * Phone number is required.
</p>
<button ion-button block large full (ngSubmit)="placeOrder()">Place order</button>
</form>

我正在尝试使用Angular的模板驱动表单文档:https://angular.io/guide/forms

我遇到的问题是,只要浏览器点击页面,浏览器就会挂起,只有出路就是结束浏览器进程。 CPU内核将会出现峰值,内存将在一分钟内增加到1GB以上。 这是一个带有Angular 4的Ionic 3应用程序。我已经将FormsModule添加到了我的app.module.ts文件中。

为什么会发生这种情况?

我发现当我删除* ngIf中的任何一个条件时,问题都没有发生(尽管显然没有验证)。

1 个答案:

答案 0 :(得分:2)

使用ngModel将您的输入绑定到组件的属性phoneNumber。因此,无论您在该输入中输入什么,都会成为phoneNumber的值。你输入的是一个字符串。所以phoneNumber是一个字符串。

字符串没有pristine或error属性。所以phoneNumber.pristine毫无意义。这些是由ngModel指令创建的FormControl对象的属性,该指令包含输入的状态。要访问此FormControl对象(通过ngModel指令),您需要将该指令公开为模板中的变量:

<ion-input type="tel" id="phoneNumber" name="phoneNumber" required 
           [(ngModel)]="phoneNumber" #phoneNumberControl="ngModel" 
           maxlength="10" minlength="10"
           placeholder="Touch here to enter a phone number" class="form-control">
</ion-input>
<p *ngIf="!phoneNumberControl.pristine && phoneNumberControl.errors.required" style="color:red;">
  * Phone number is required.
</p>