Introduction
Angular is a popular JavaScript framework for building web applications. In Angular, form validation is an essential feature required when developing web applications. Validation logic checks the data entered by the users before submitting data to a server or saving it in local storage.
Angular provides various validators that are available out of the box, but some of them might not be sufficient for complex validation scenarios. In such cases, custom validators come in handy.
Custom Validators in Angular
In Angular, we can define custom validators to verify input fields based on our needs. Custom validators are functions that take control as input and return a validation error if the validation fails; else, a null value is returned.
In Angular, the FormControl class is used to get the value from the form control and trigger its validation. We can define our custom validators by implementing the Validator interface. Validators can be defined using a class or a function, but it is recommended to use the function approach.
For example, let us define a custom validator that checks if the entered value has at least ten characters.
“`typescript
import { AbstractControl, ValidatorFn } from ‘@angular/forms’;
export function customValidator(control: AbstractControl): { [key: string]: boolean } | null {
if (control.value.length < 10) {
return { ‘InvalidLength’: true };
}
return null;
}
“`
Here, we have defined the customValidator function that takes input control and returns an error message in case the length of the passed value is less than ten.
Now, let us see how to add a custom validator to the HTML form.
“`HTML
“`
Here, we have used the Angular Material input field and FormControl to map the input field to our customValidator.
Angular Custom Validators with Parameters
Sometimes, we might encounter a situation where we need to pass some parameters to validate a particular form field. To achieve this scenario, we need to modify our custom validator functions. We can pass additional parameters to the validator function by returning the function instead of returning the result directly.
“`typescript
export function customValidator(param1: number, param2: string): ValidatorFn {
return (control: AbstractControl): { [key: string]: boolean } | null => {
if (control.value) {
//Perform some validation
}
return null;
};
}
“`
Here, the validator function returns an anonymous function that takes the base AbstractControl as input parameter and returns same validations.
Let us see how to use this validator in a template.
“`HTML
The input must contain {{param1}} and {{param2}} elements.
“`
In this HTML code, we have added 2 parameters, param1 and param2, that we can pass from the component. The custom validator will now work based on the parameters passed.
FAQs
1. Why do we need custom validators in Angular?
Custom validators are required in Angular when we need to perform validations that are complex beyond the ones that Angular provides. Custom validators are essential for performing validations like password matching, date range validations, etc.
2. How do custom validators work in Angular?
Custom validators in Angular are functions that take the input control and return an error message in case the validation fails; else, the value is returned as null.
3. Can we add parameters to custom validators?
Yes, we can add parameters to custom validators by returning a function that takes the input control and parameters as input.
4. How do we test custom validators in Angular?
In Angular, we can test the custom validators by creating a test bed in the TestBed module. We can create a control with invalid values and check if the validator returns an error or not.
Conclusion
Custom validators are essential in Angular for performing complex validations that are beyond the scope of out-of-the-box validators. Custom validators can be defined easily in Angular by implementing the Validator interface. Adding parameters to custom validators is also possible by returning functions that take inputs as arguments.