有効数字付き角度2のフォーム

Question

ここでは、イオンアプリケーションの角度2のフォーム検証コードを試しましたが、そのフォームでいくつかのエラーがあります。ここ

は、私は、ブラウザで実行時エラーメッセージを取得していますテンプレート

<ion-item> 
      <ion-label for="name" floating >FIRST NAME</ion-label> 
      <ion-input formControlName="firstName" type="text" required></ion-input> 
     <div [hidden]="name.valid || name.pristine" 
      class="alert alert-danger"> 
      Name is required 
     </div> 
     </ion-item> 

です。

Answer 1

イオン入力、名前フィールド（angular2フォームは内部的に使用する）に参照を追加する必要があります。おそらく、この入力をコンポーネントのnameというプロパティにバインドする必要があります。

あなたのHTMLは次のようにする必要があります：

<ion-item> 
     <ion-label for="name" floating >FIRST NAME</ion-label> 
     <ion-input formControlName="firstName" [(ngModel)]="name" name="name" type="text" #name="ngModel" required></ion-input> 
     <div [hidden]="name.valid || name.pristine" class="alert alert-danger"> 
      Name is required 
     </div> 
</ion-item> 

そして、あなたのコンポーネントで、「名前」と呼ばれるプロパティを追加することを忘れないでください。このように：

import { Component } from '@angular/core'; 

@Component({ 
    selector: 'the-html-page-with-your-form', 
}) 
export class YourComponent { 
    name: string=""; 
    constructor(){} 
} 

Answer 2

私はこれを試しました！

<ion-item> 
<ion-label floating >FIRST NAME</ion-label> 
<ion-input formControlName="firstName" #refName class="form.control" type="text" ></ion-input> 
    <div *ngIf='signupForm.control'[firstName].hasError('required') class="alert alert-danger"> 
       Please Enter Name! 
    </div> 
</ion-item> 

この

はエラー「テンプレートのパースエラー」のような表示