Angular 4 表单验证 - 导出 ngModel 时浏览器崩溃

Angular 4 Forms Validation - browser crashes when exporting ngModel

我有一个简单的输入控件,我想使用 Angular 表单验证来验证,例如

<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 中的任何一个条件时,问题不会发生(尽管显然没有验证)。

您的输入已使用 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>