How to set a custom error message to a form in angular

Question

I have the below code in my component:

 if (form.controls['minRange'].hasError('min')) {
        form.controls['minRange'].setErrors({ min: true });
 }

I am getting the message in input as 'minRange is invalid'.But I want to display the error message as 'P

'Please enter a 5 digit value'

Like .setErrors how can I set errormessage in formcontrol.Can any one please help me.Thanks.

Answer 1

I have seen this pattern of ngIf inside the html template numerous times and I have got to say it's not that scalable, Just think if you have to customize many error messages on a lot of inputs with many validators. It would have been nice if Angular would have let to set the error message on the validator. Then you would just use a pipe to print all the errors and be done with.

My advice if you have just one simple form you can use this pattern but if not try to think of something more centralized that can scale.

Here is an example for a pipe that can display your errors

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

@Pipe({
  name: 'inputError'
})
export class InputErrorPipe implements PipeTransform {

  transform(value: any, ...args: any[]): string {
    let entered:boolean=false;
    let rvalue: string='';
    if(value){
      Object.values(value).forEach((message) => {
        if(typeof message !== 'undefined'){
          if (entered) {
            rvalue += '\n ';
          }
          entered=true;
          rvalue += message;
        }
      });
    }else{
      rvalue='';
    }
    return rvalue;
  }

}

Answer 2

2021/22+ Answer. Don't access form control/error directly. Now there are functions to do so.

In HTML something like this in combination with required.

This is our custom error key.

loginForm.get('email')?.getError('invalid')

<span
      *ngIf="
        !loginForm.get('email')?.valid &&
        (loginForm.get('email')?.touched || loginForm.get('email')?.dirty)
      "
    >
      {{
        loginForm.get('email')?.hasError('required')
          ? 'Username Required'
          : loginForm.get('email')?.getError('invalid')
      }}

</span>

In Component when error occurs in API call

 this.loginForm.get('email')?.setErrors({ invalid: 'Invalid Username' });

'invalid' is key, it's value is our error message.

That's it!

Answer 3

Reactive Form in Angular allows you to have custom errors and custom validations. Below is an example:

HTML : Validate if the input is number.

<form  [formGroup]="form">
  <input formControlName="age" >
  <span *ngIf="form.controls.age.errors?.invalidNumber">   // <--- invalidNumber is the key
      Age should be a number
  </span>
</form>

Component.ts

 class TestComponent implements OnInit{
  form:FormGroup;

  ngOnInit(){
    this.createForm();
    this.listenToAgeChange();
  }

  createForm(){
    this.form = new FormGroup({
      age:new FormControl(null)
    })
  }

  listenToAgeChange(){
    this.form.controls.age.valueChanges.subscribe(age=>{
      if(isNaN(age)){
        this.form.controls.age.setErrors({invalidNumber:true})  // <--- Set invalidNumber to true 
      }else{
        this.form.controls.age.setErrors(null)
      }
    })
  }
}