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

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.

Solution 1:^[1]

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)
      }
    })
  }
}

Solution 2:^[2]

2021 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!

Solution 3:^[3]

TS:

if (form.controls['minRange'].hasError('min')) {
   form.controls['minRange'].setErrors({ incorrect: true, message: 'Please enter a 5 digit value'});   
}

html:

<ion-text color="danger">{{form.controls['minRange'].errors.message}}</ion-text>

Solution 4:^[4]

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;
  }

}

Solution 5:^[5]

 <form  [formGroup]="form">
      <input formControlName="userName" > 
 <div *ngIf="form.controls['userName'].errors?.minlength">
         Please enter a 5 digit value
    </div> 
    </form>

under ts file you need to create FormGroup with validators 1.declare

 form:FormGroup

initialize form inside ngOninit

this.form  = this.formBuilder.group({
       userName: ['', Validators.minLength(5)],
     });

import statement

import { FormBuilder, FormGroup, Validators  } from '@angular/forms';

Solution 6:^[6]

It's set in the HTML template. I suspect that you have a code there which renders the said message.

Try:

  <input ...your input here ...>
  <div *ngIf="formcontrol.min">
    Please enter a 5 digit value
  </div>

if you need custom form validation, maybe you can also give a try to custom form validators.

Solution 7:^[7]

To validate minimum length in reactive form we can use minlength attribute with formControlName as following:

<form  [formGroup]="form">
  <input formControlName="userName" minlength="5"> < ---
</form>
<div *ngIf="userName.errors?.minlength">
     Please enter a 5 digit value
</div>

we need to use Validators.minLength with FormControl while creating FormGroup. app.component.ts:

 form = new FormGroup({
    userName: new FormControl('', Validators.minLength(5)) < ---
  });

  get userName() {
    return this.form.get('userName');
}

https://stackblitz.com/edit/angular-ngvbzn?file=src%2Fapp%2Fapp.component.html

Hope it helps!

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Renil Babu
Solution 2	minigeek
Solution 3	Robson Chico
Solution 4	nechemya ungar
Solution 5	Juan
Solution 6	ForestG
Solution 7

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

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Solution 4:[4]

Solution 5:[5]

Solution 6:[6]

Solution 7:[7]