2016-12-14 2 views
-1

First_NameとLast_Nameとしてフォームを作成しました。 角型2に汎用フォームバリデーターがあり、クライアント側にエラーメッセージが表示されています。その危険を表示する方法!角2で危険なエラーメッセージを表示する方法

ベローは危険にさらされて自分のコード

htmlファイル

<form [formGroup]="myForm" (ngSubmit)="submit()" > 

<ion-item> 
    <ion-label primary floating>FIRST NAME</ion-label> 
    <ion-input type="text" id="firstname" class="form-control" formControlName="firstname" minlength="4" maxlength="12" required ></ion-input> 
</ion-item> 
    <p *ngIf="myForm.controls.firstname.errors && myForm.controls.firstname.dirty " danger > FirstName is required (b/w 4-12 chars)</p> 
<ion-item> 
    <ion-label primary floating>LAST NAME</ion-label> 
    <ion-input type="text" id="lastname" class="form-control" formControlName="lastname" minlength="4" maxlength="10" required ></ion-input> 
</ion-item> 
    <p *ngIf="myForm.controls.lastname.errors && myForm.controls.lastname.dirty " danger> LastName is required (b/w 1-10 chars)</p> 
</form> 

を教えてくださいどのように表示エラーメッセージです!

+0

はこのイオンアプリですか? –

+0

はいイオンアプリ! –

+0

https://angular.io/docs/ts/latest/cookbook/form-validation.html#!#sts=Reactive%20Forms –

答えて

0
 <form role="form" name="myForm" novalidate=""> 
     <div data-ng-show="myForm.controls.firstname.errors && myForm.controls.firstname.dirty" class="alert alert-danger alert- dismissible" role="alert"> 
       <strong>FirstName is required (b/w 4-12 chars)</strong> 
      </div> 

      <div data-ng-show="myForm.controls.lastname.errors && myForm.controls.lastname.dirty" class="alert alert-danger alert-dismissible" role="alert"> 
       <strong>LastName is required (b/w 1-10 chars)</strong> 
      </div> 
    </form> 
+0

「myForm.get。( 'firstname')」を使用します。何もしませんそれは –

関連する問題