検証エラーメッセージを角2で表示する方法

Question

ユーザーがFirst_NameとLast_Nameを入力するフォームを作成したいとします。クライアント側のフィールドを検証したいと思います。

Angular 2に汎用フォームバリデーターがありますか？また、クライアント側にエラーメッセージを表示したいと思います。エラーメッセージを表示するには？

ベローは、ファイル

<form [formGroup]="myForm" (ngSubmit)="submit()" > 
<ion-row> 
    <ion-item> 
    <ion-label primary floating>FIRST NAME</ion-label> 
    <ion-input type="text" id="firstname" class="form-control" formControlName="firstname"></ion-input> 
    </ion-item> 

<ion-item> 
    <ion-label primary floating>LAST NAME</ion-label> 
    <ion-input type="text" id="lastname" class="form-control" formControlName="lastname" ></ion-input> 
</ion-item> 
</ion-row> 
</form> 

TS私のコード

htmlファイルです：

this.myForm = formBuilder.group({ 
    'firstname' : ['', Validators.compose([Validators.required, Validators.minLength(4), Validators.maxLength(10)])], 
    'lastname' : ['', Validators.compose([Validators.required, Validators.minLength(1), Validators.maxLength(10)])],}) 

バックエンドエンドポイント名と名前をフィールド：

submit(){ 
    let registerNewUserObj ={ 
     first_name:this.myForm.value.firstname, 
     last_name:this.myForm.value.lastname 

Answer 1

はエラーを表示するには、このコードを使用しますメッセージ。

<ion-input type="text" id="firstname" class="form-control" formControlName="firstname"></ion-input> 
<p class="errorMessage" *ngIf="myForm.controls.firstname.errors && myForm.controls.firstname.dirty ">Please provide first name.</p>