Custom Validator in Angular Reactive Form

Learn how to build a custom validator in Angular Reactive form. A data entry form can contain a large no of fields. The Angular forms module makes it easier to create, manage, and validate the form fields. There are two ways in which you can create forms in Angular. One is Reactive forms & the other one is template-driven forms. Learn how to create reactive forms & how to create template-driven forms.

Built-in Validators

Validating the Forms is very important, otherwise, we will end up having invalid data in our database. The Angular Forms Module provides a few built-in validators to help us to validate the form. They are listed below.

1. Required validator
2. Min length Validator
3. Max length Validator
4. Pattern Validator
5. Email Validator

We covered them in the validation in reactive forms & validation in template-driven forms tutorial.

Custom Validator in Angular Reactive Form

Built-in validators are useful but do not cover all use cases. This is where we use the custom validator. It is very easy to create a custom validator in Angular.

How to Build Custom Validator

Building a custom Validator is as easy as creating a Validator function. It is a function, which must implement ValidatorFn Interface.

ValidatorFn

The ValidatorFn is an Interface, which defines the signature of the Validator function.

The function takes the AbstractControl. This is the base class for FormControl, FormGroup, and FormArray. The validator function must return a list of errors i.e ValidationErrors or null if the validation has passed

Custom Validator Example

Create a new angular application. Add the following code in app.component.html

Source Code

Our example app has numVal form field. We want it to be greater than 10.

Angular does not have any built-in validator for that. Hence let us build a custom Validator gte

Create a new file gte.validator.ts under the app folder.

Source Code

First, import the AbstractControl and ValidationErrors from the @angular/forms

The validator function must adhere to the ValidatorFn Interface. It should receive the AbstractControl as its parameter. It can be FormControl, FormGroup or FormArray.

The function must validate the control value and return ValidationErrors if any errors are found otherwise null.

The ValidationErrors is a key-value pair object of type [key: string]: any and it defines the broken rule. The key is the string and should contain the name of the broken rule. The value can be anything, but usually set to true.

The validation logic is very simple. Check if the value of the control is a number using the isNaN method. Also, check if the value is less than or equal to 10. If both the rules are valid and then return null

If the validation fails then return the ValidationErrors. You can use anything for the key, but it is advisable to use the name of the validator i.e gte as the key. Also, assign true as value. You can as well assign a string value.

You can return more than one key-value pair as shown in the above example. The second key requiredValue returns the value 10. We use this in the template to show the error message.

Using the Custom Validator

To use this validator first, import it in the component class.

Add the validator to the Validator collection of the FormControl as shown below.

The complete app.component.ts is shown below.

Source Code

Accessing the Errors from Custom Validator

We need to provide a meaningful error message to the user.

Validators return ValidationErrors. They are added to the control’s errors collection of the control. The valid property of the control is set to false.

Hence we check if the valid property. We also check the dirty and touched property. Because we do not want to display the error message when the form is displayed for the first time.

We check if the gte is true and display the error message. Note that gte is the name of the key we used while creating the validator.

We also make use of the requiredValue to show a meaningful message to the user.

Now, we have successfully built a custom validator in reactive forms.

Next Steps

Our Custom validator is simple, but it can be improved.

Instead of the hardcoded value of 10, we want it set it while defining the validator. i.e we want to send the parameter to the validator function.

The validator might depend on a service to be injected.

You can refer to the following tutorials on Angular Forms

1. Angular Forms Tutorial: Fundamental & Concepts
2. Template Driven Forms in Angular
3. Set Value in Template Driven forms in Angular
4. Reactive Forms in Angular
5. FormBuilder in Reactive Forms
6. SetValue & PatchValue in Angular
7. StatusChanges in Angular Forms
8. ValueChanges in Angular Forms
9. FormControl
10. FormGroup
11. FormArray Example
12. Build Dynamic or Nested Forms using FormArray
13. Validations in Reactive Forms in Angular
14. Custom Validator in Reactive Forms
15. Passing Parameter to Custom Validator in Reactive Forms
16. Inject Service into Custom Validator
17. Validation in Template Driven Forms
18. Custom Validator in Template Driven Forms

Summary

The Validators are nothing but function, which implements the ValidatorFn Interface. They receive an instance of Form Control. It checks the control value for validity. If the validation errors are present, then they must return ValidationErrors. Return null if the validation is successful.