Custom Validator With Parameters In Angular
In this article, We will learn how to use Angular Reactive Forms to create a custom validator with arguments. This article builds on the last one, in which we learnt how to create a custom validator in Reactive forms.
Custom Validator with Parameter
From the Custom Validators in Angular Reactive Form tutorial, here is the code for the greater than validator (gte). The validator determines whether the given value is larger than 10 and returns ValidationErrors if it is not.
export function gte(control: AbstractControl): ValidationErrors | null {
const v:number=+control.value;
if (isNaN(v)) {
return { 'gte': true, 'requiredValue': 10 }
}
if (v <= 10) {
return { 'gte': true, 'requiredValue': 10 }
}
return null
}
The value 10 is hardcoded in the above validator, which is an issue. As a result, we won't be able to reuse it. We must supply the number as a parameter if we wish to reuse it.
As demonstrated below, we'll add the val:number parameter to the validator.
export function gte(control: AbstractControl,val:number): ValidationErrors | null {
As illustrated here, the compiler throws an error right away.
error TS2345: Argument of type '((control: AbstractControl, val: number) => ValidationErrors)[]' is not assignable to parameter of type 'ValidatorFn | ValidatorFn[] | AbstractControlOptions'.
Because the Validator must implement the ValidatorFn Interface, this is the case. It can only have one parameter, which is control: AbstractControl
interface ValidatorFn {
(control: AbstractControl): ValidationErrors | null
}
Passing Parameters to a Custom Validator
We need to develop a factory function or a function that returns a function to pass an argument. The following is an example of code.
export function gte(val: number): ValidatorFn {
return (control: AbstractControl): ValidationErrors | null => {
let v: number = +control.value;
if (isNaN(v)) {
return { 'gte': true, 'requiredValue': val }
}
if (v <= +val) {
return { 'gte': true, 'requiredValue': val }
}
return null;
}
}
We begin by creating a factory function. It is given the value val as an argument. It must return a ValidatorFn function of type.
export function gte(val: number): ValidatorFn {
A ValidatorFn function must be returned by the get.
return (control: AbstractControl): ValidationErrors | null => {
//Validaton code here
}
Using the Validator
Now, as shown below, add the validator to the FormControl's Validator collection.
myForm = new FormGroup({
numVal: new FormControl('', [gte(10)]),
})
Accessing the Errors in Template
<h1>Custom Validator with Parameter in Angular</h1>
<h2>Reactive Form</h2>
<form formgroup="" myform="" ngsubmit="" novalidate="" onsubmit="">
<div>
<label>Number :</label>
<input formcontrolname="numVal" id="numVal" name="numVal" type="text" />
<div ngif="!numVal.valid && (numVal.dirty ||numVal.touched)">
<div ngif="numVal.errors.gte">
The number should be greater than {{numVal.errors.requiredValue}}
</div>
</div>
</div>
<p>Is Form Valid : {{myForm.valid}} </p>
<p>
<button disabled="" myform.valid="" type="submit">Submit</button>
</p>
</form>Concussion
We learned how to use a custom validator with a parameter. To begin, we'll write a factory function that takes the parameter. The validator function is returned by the factory function. We can pass as many parameters to a custom validator in Angular using this technique.
I hope this article helps you and you will like it.👍
If you have any doubt or confusion then free to ask in comment section.