Angular: Reactive forms custom Validators

In this post, we will learn how to create custom validator and to use them with form Controls.

Validators are used to validate our form. Form can have any input field or it could be a drop down or checkbox or any other element, you can validate the field by putting validator to its formControl in Reactive forms.

Unlike the Template driven forms, in Reactive Forms you can use validators in typescript file ( component ). You add validator functions directly to the formcontrol in the Component and Angular calls these functions whenever the value of the control changes.

There are two types of Validator in Reactive Forms -

1. Sync Validators : You can pass these validators as second argument to the formcontrol at time of the formControl creation. These type of validators take the control instance and validates the input and immediately returns the set of validation errors ( for ex — error object { [ key: string ]: boolean } ) or null ( in case of the value is valid).
2. Async Validators: These validators can be passed as third argument to the formcontrol when you create a formControl. The validator takes the control instance and returns the Promise or Observable that later emits the set of validation errors or null.

Custom Synchronous Validator Creation -

Here we have example of the sync validator. we have created email validator to validate the entered email id if it matches with the allowed pattern.

Here in above example, the validation is happening in 2 steps -

1. check if the control does not have value then return null meaning form control is valid.
2. if control has email id entered then we are using 2 validators ( default email validator by angular and pattern validation for custom check )

In the second scenario if the entered email id is valid, return null else you have to return an object containing the error type ( invalidEmail in our case ) with ‘true’ value.

Note: Never return a false value ( ex: {invalidEmail: false} )in case of the control is valid as angular will treat it as it has an error and your form will be invalid always.

How to use the Sync Validator: Here is the example how you can use the validator in component -

if you have more than one validator to use along with custom, use as below -

Custom Asynchronous Validator Creation:

Here the demo example for the async validator. Here we have used the setTimeout to get the async behavior but the actual use is, you can validate the data against the api call or asynchronous call.

You will always return either an observable or promise from async validator.

How to use Async Validator : Here is the example how you can use the validator in component -

I Hope you will now have understanding of custom validator creation and its use.

Reference —

https://angular.io/guide/form-validation

https://angular.io/api/forms/AsyncValidator