Angular 4 Forms Validation - 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コアがスパイクし、メモリは1分以内に1GB以上に増加し続けます。 これはAngular 4のIonic 3アプリケーションです。私はapp.module.tsファイルにFormsModuleを追加しました。

これはなぜ起こっているのでしょうか？

私の* ngIf内のいずれかの条件を削除すると、問題は発生しません（明らかに検証はありません）。

Answer 1

入力がバインドされています。コンポーネントのプロパティphoneNumberにngModelを使用します。だから、あなたが入力したものはphoneNumberの値になります。あなたが入力するのは文字列です。したがって、phoneNumberは文字列です。

文字列には、元のプロパティまたはエラープロパティはありません。だからphoneNumber.pristineは意味をなさない。これらは、ngModelディレクティブによって作成されたFormControlオブジェクトのプロパティで、入力の状態が含まれています。 （ngModelディレクティブを介して）このFormControlオブジェクトにアクセスするには、テンプレートに変数として指示を公開する必要があります。

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