How to display only single validation error at a time

Question

I have this code to which displaying errors on my form

&         


        

Answer 1

You can create a Custom Pipe that checks first error equals with specified error:

CUSTOM PIPE

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'equals'
})

export class Equals implements PipeTransform {

  transform(errors: any, error: any, args?: any): any {
    if (!errors)
      return false;

    const array = Object.keys(errors);
    if (array && array.length > 0)
      return errors[array[0]] === error;

    return false;
  }
}

You can have lots of error div but just one error will be shown:

// input is form.controls.input1
Required
MaxLength
Pattern