I am showing reactive form error messages as per the suggested approach of angular [angular form validation error example](https://angular.io/guide/form-validation#template-driven-validation). 

**html code of showing error on the page:**

```html
<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 :

```js
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.