Angular Custom Validation: Creating Custom Validators with Examples (2024)

Angular is a powerful front-end framework that allows developers to build dynamic and interactive web applications. One of the key features of Angular is its form handling capabilities. Angular provides a set of built-in validators to perform common form validations such as required fields, email format, and min/max length. However, there are cases where you need to implement custom validation logic to meet your application’s specific requirements. In this article, we will explore how to create custom validators in Angular with examples.

Custom validators in Angular are essential when you encounter validation scenarios that cannot be achieved using the built-in validators. Some common use cases for custom validators include:

1. Password Confirmation: You might want to ensure that two password input fields match each other.
2. Unique Username: Checking if a chosen username is unique in your application’s database.
3. Conditional Validation: Implementing complex validation rules based on the state of other form controls.

To create a custom validator in Angular, you need to define a function that performs the validation logic and returns a validation error object if the validation fails. This function should adhere to the signature of ValidatorFn or AsyncValidatorFn based on whether your validation logic is synchronous or asynchronous.

Synchronous Custom Validator

Here’s an example of a synchronous custom validator that checks if a name contains only letters:

In this example, we define a letterValidatorfunction that returns a validator function. The validator function takes a form control as an argument and checks if it contains only letters. If not, it returns a validation error object with a invalidSymbols property.

Usage:

Now if form control has invalid symbols we will see error message

And theinvalidSymbols property comes from LetterValidator

Now, let’s assume our validator depends on the value of another form control. A good example is the password confirmation input

So we need to create a custom validation to confirm that two password fields match each other. First, let’s create the custom validator function for password confirmation:

In this code, we define a passwordConfirmationValidator function that takes two control names as arguments: controlName for the password field and matchingControlName for the confirmation password field. This function returns a validator function that compares the values of these two fields and sets a passwordMismatch error if they do not match.

Now, let’s use this custom validator in an Angular component:

In this component, we import and use the passwordConfirmationValidator function to create a custom validation rule for the password confirmation. We apply this custom validator to the form group by passing the control names ('password' and 'confirmPassword') to the passwordConfirmationValidator function within the validator option.

Lastly, you can display an error message in your template when the passwords don’t match:

In the template, we use the *ngIf directive to display an error message when the 'confirmPassword' field has the 'passwordMismatch' error set, indicating that the passwords do not match.

With this custom validation in place, your Angular registration form will ensure that the user enters the same password in both the ‘password’ and ‘confirmPassword’ fields

In this example we will check checking if a chosen username is unique in our application’s database.

For asynchronous validation, you can use the AsyncValidatorFn. Here's an example of an asynchronous custom validator that checks if a username is already taken:

In this example, we define an uniqueUsernameValidator function that returns an asynchronous validator function. This validator function checks if the username already exists by calling a userService method. It returns an observable that emits a validation error object if the username is taken or null if it's available.

Html

<mat-form-field>
 <mat-label>User name</mat-label>
 <input matInput type="text" placeholder="Name" formControlName="name" />
 <mat-error *ngIf="userForm.controls['name'].hasError('usernameTaken')">
 Username is taken
 </mat-error>
</mat-form-field>

Example

Note: When the request is pending, userForm.invalid becomes false

Custom validators are a powerful tool in Angular for handling complex form validation requirements. By creating custom validators, you can tailor your validation logic to the specific needs of your application. Whether you need to perform synchronous or asynchronous validation, Angular provides a flexible framework to implement and use custom validators effectively. So, don’t hesitate to leverage custom validators to enhance the user experience in your Angular applications.

Thank you for reading until the end. Please consider following the writer and this publication. Visit Stackademic to find out more about how we are democratizing free programming education around the world.