角4种形式的检验 - 浏览器崩溃出口ngModel

Question

当我有一个简单的输入控制我想用角形式的验证来验证，例如

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

我试图与角的文档模板驱动的形式沿着沿：我有https://angular.io/guide/forms

问题是，只要浏览器击中页面，浏览器只是挂起，和唯一的出路是结束浏览器进程。 CPU核心将飙升，内存将在一分钟内持续增加至1GB以上。 这是4角的离子3应用程序，我已经添加了FormsModule我app.module.ts文件。

任何想法，为什么这会发生？

我发现，当我删除任我* ngIf内的条件，不会发生问题（尽管很显然没有验证即可）。

Answer 1

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

字符串没有原始属性或错误属性。所以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>