Angular Custom Validator Apply Template For Repetitive Code

I have multiple input fields where almost same validation is required. Is there any way to reduce repetitive HTML code for displaying error. My code is as below <

Solution 1:

You can create a component with input properties something like

export class YourCustomComponent{
@Input() control:FormControl;
@Input() errMessages:any;//it should be an object like {required:'desc is req'}
constructor(){
}

}

in html

        <div *ngIf="control.invalid && (control.dirty || control.touched)" class="alert alert-danger">
                  <div *ngIf="control.errors.required">
                   errMessages.required
                  </div>
                  ......so on
         </div>

Then use it under your input like

 <your-custom-component [control]="desc" [errMessages]="{required:'desc is required'}"> </your-custom-component>