Custom validation using AngularJS directives

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

1. Create a directive using .directive().
2. Use ngModelController (ngModelCtrl) to manipulate the form field’s validity.
3. Implement validation logic inside $parsers or $validators.
4. 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.