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