Best way to show error messages for angular reactive forms, one formcontrol multiple...

I am showing reactive form error messages as per the suggested approach of angular angular form validation error example.

html code of showing error on the page:

<div [formGroup]="myForm">
<div>
<input type="text" formControlName="firstName"/>
<div *ngIf="myForm.controls.firstName.invalid"
class="alert alert-danger">
<div *ngIf="myForm.controls.firstName.errors.required">
This Field is Required.
</div>
<div *ngIf="myForm.controls.firstName.errors.maxlength">
your can enter only 50 characters
</div>
</div>
</div>
<div>
<input type="text" formControlName="lastName"/>
<div *ngIf="myForm.controls.lastName.invalid"
class="alert alert-danger">
<div *ngIf="myForm.controls.lastName.errors.required">
This Field is Required.
</div>
<div *ngIf="myForm.controls.lastName.errors.maxlength">
your can enter only 50 characters
</div>
</div>
</div>
</div>


Just for the reference of my component code below :

this.myForm = this.formBuilder.group({
firstName:['',[Validators.required,Validators.maxLength(50)]],
lastName:['',[Validators.required,Validators.maxLength(50)]]
})


If you see the above code, I have applied two validation on my firstName and lastName field.

For showing error message, I have written multiple *ngIf condition to show the error message.

Is there any best way to show the validation message of particular control without writing multiple *ngIf condition ?, because the same code I am writing again and again with different control name and validator name for showing error message.

Continue reading...