AngularJS allows you to create custom validation rules using directives. These custom validators help enforce specific input rules beyond built-in validation like required
, email
, and pattern
.
With custom directives, you can attach validation logic to form fields and use AngularJS’s $valid
and $invalid
properties.
1. Steps to Create a Custom Validator
- Create a directive using
.directive()
. - Use
ngModelController
(ngModelCtrl
) to manipulate the form field’s validity. - Implement validation logic inside
$parsers
or$validators
. - Set validation errors using
ngModelCtrl.$setValidity()
.
2. Example: Custom Validation for a Username
Requirement: The username must be at least 5 characters long.
Step 1: Define the Directive
var app = angular.module('myApp', []);
app.directive('validateUsername', function() {
return {
require: 'ngModel',
link: function(scope, element, attrs, ngModelCtrl) {
ngModelCtrl.$validators.validateUsername = function(value) {
return value && value.length >= 5; // Valid if length ≥ 5
};
}
};
});
Step 2: Use the Custom Directive in the HTML Form
<form name="userForm">
<label>Username:</label>
<input type="text" name="username" ng-model="user.username" validate-username required>
<p ng-show="userForm.username.$error.validateUsername">
Username must be at least 5 characters long.
</p>
<p ng-show="userForm.username.$valid"> Username is valid.</p>
</form>
If the user enters a name shorter than 5 characters, an error appears.
3. Example: Custom Email Validation
Requirement: Email must contain “example.com”.
Step 1: Define the Directive
app.directive('customEmail', function() {
return {
require: 'ngModel',
link: function(scope, element, attrs, ngModelCtrl) {
ngModelCtrl.$validators.customEmail = function(value) {
return value && value.includes("@example.com"); // Valid if contains "example.com"
};
}
};
});
Step 2: Use It in the Form
<form name="emailForm">
<label>Email:</label>
<input type="email" name="email" ng-model="user.email" custom-email required>
<p ng-show="emailForm.email.$error.customEmail">
Email must belong to example.com domain.
</p>
<p ng-show="emailForm.email.$valid"> Email is valid.</p>
</form>
Only emails ending in @example.com
are accepted.
4. Example: Custom Password Strength Validation
Requirement: The password must contain at least one uppercase letter and one number.
Step 1: Define the Directive
app.directive('strongPassword', function() {
return {
require: 'ngModel',
link: function(scope, element, attrs, ngModelCtrl) {
ngModelCtrl.$validators.strongPassword = function(value) {
return value && /^(?=.*[A-Z])(?=.*\d)/.test(value); // At least 1 uppercase & 1 number
};
}
};
});
Step 2: Use It in the Form
<form name="passwordForm">
<label>Password:</label>
<input type="password" name="password" ng-model="user.password" strong-password required>
<p ng-show="passwordForm.password.$error.strongPassword">
Password must contain at least one uppercase letter and one number.
</p>
<p ng-show="passwordForm.password.$valid"> Password is strong.</p>
</form>
Ensures strong password security.