--
Angular 14 provides a powerful framework for building web applications, but sometimes the built-in validators are not enough. That’s where custom validation comes in. In this post, we will explore how to create custom validators in Angular 14 and provide a working example.
Custom validation in Angular 14 allows developers to create their own validators to meet specific application requirements. This feature is useful when the built-in validators do not meet the validation criteria. Custom validators allow developers to check for validation based on specific requirements and give more control over the validation process.
Creating custom validators in Angular 14 involves creating a class that implements the Validator interface. The Validator interface has one method, validate, which takes a control as an argument and returns an object of type ValidationErrors if the control is invalid, or null if the control is valid.
Here is an example of a custom validator that checks if a string contains only numbers:
import { AbstractControl, ValidatorFn, Validators } from '@angular/forms';export function numbersOnly(): ValidatorFn {
return (control: AbstractControl): { [key: string]: any } | null => {
const regex = /^\d+$/;
const valid = regex.test(control.value);
return valid ? null : { numbersOnly: true };
};
}
In the example above, we create a function called numbersOnly() that returns a ValidatorFn. This function takes an AbstractControl object as an argument and returns an object of type ValidationErrors if the control is invalid, or null if the control is valid. The function checks whether the input string contains only numbers using a regular expression. If the input string contains only numbers, it returns null; otherwise, it returns an object with the key numbersOnly set to true.
Once we have created a custom validator, we can use it in our forms. Here is an example of a form that uses the custom validator we created earlier:
<form [formGroup]="myForm">
<label>
Enter a number:
<input type="text" formControlName="myInput">
</label>
<div *ngIf="myForm.get('myInput').invalid && (myForm.get('myInput').dirty || myForm.get('myInput').touched)">
<div *ngIf="myForm.get('myInput').errors.numbersOnly">
Please enter numbers only.
</div>
</div>
</form>In the example above, we create a form group called myForm that has a single form control called myInput. We apply the numbersOnly() validator to the myInput control by adding it to the list of validators for the control:
import { Component } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { numbersOnly } from './validators';@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
myForm: FormGroup;
constructor(private fb: FormBuilder) {
this.myForm = this.fb.group({
myInput: ['', [Validators.required, numbersOnly()]]
});
}
}
In the example above, we import the numbersOnly() validator and add it to the list of validators for the myInput control. We also apply the built-in Validators.required validator to the myInput control to ensure that it is not empty.
In this post, we explored how to create a custom validator in Angular 14 and provided a working example of how we can use this utility in a real app scenario. Of course, the possibilities here are endless and this is where your craftsmanship and creativity kick in. Just keep on coding.
