Best way to show error messages for angular reactive forms, one formcontrol multiple validation errors?

Question

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

Answer 1

I would suggest to have a component called print-error which can handle any kind of OOTB or Custom errors.

You can handle as many as errors you want.

print-error.component.ts

import {Component, Input} from '@angular/core';

@Component({
    selector: 'print-error',
    templateUrl: './print-error.component.html',
    providers: []
})
export class PrintError {

    @Input("control")
    control: any;

}

print-error.component.html

     
This field is required
     
{{control.errors.unique}}
     
{{control.errors.lessThen}}
     
{{control.errors.greaterThan}}
     
{{control.errors.email}}
     
{{control.errors.mobile}}
     
{{control.errors.confirmPassword}}

Usages

 Email