How to create custom directives for form validation in AngularJS

In AngularJS, you can create custom directives to handle form validation by extending the functionality of the built-in ngModel directive. Here's a step-by-step guide on how to create custom directives for form validation in AngularJS:

1. Create a new AngularJS module: Start by creating a new AngularJS module that will contain your custom directives.

   javascriptCopy code
   var app = angular.module('customValidationApp', []);
   

2. Create a custom directive: Define a custom directive using the app.directive function. This directive will be responsible for adding custom validation logic to the form elements.

   javascriptCopy code
   app.directive('customValidation', function () {
       return {
           require: 'ngModel',
           link: function (scope, element, attrs, ngModelCtrl) {
               // Custom validation logic goes here
           }
       };
   });
   

   In this example, the directive is named customValidation, and it requires the ngModel controller.

3. Implement custom validation logic: Inside the link function of your custom directive, you can implement your custom validation logic. Access the ngModelCtrl to interact with the AngularJS validation pipeline.

   javascriptCopy code
   app.directive('customValidation', function () {
       return {
           require: 'ngModel',
           link: function (scope, element, attrs, ngModelCtrl) {
               // Custom validation logic
               ngModelCtrl.$validators.customValidator = function (modelValue, viewValue) {
                   // Perform your validation logic here
                   // Return true if valid, false if not
               };
           }
       };
   });
   

4. Use the custom directive in your HTML: Apply your custom directive to the form element where you want the validation to take place.

   htmlCopy code
   <form name="myForm">
       <input type="text" name="myInput" ng-model="myModel" custom-validation>
   </form>
   

   In this example, the custom-validation directive is applied to the input element.

5. Display validation messages: To display validation messages, you can use AngularJS directives like ng-show or ng-if based on the validation state.

   htmlCopy code
   <form name="myForm">
       <input type="text" name="myInput" ng-model="myModel" custom-validation>
       <div ng-show="myForm.myInput.$error.customValidator">
           Custom validation error message.
       </div>
   </form>
   

   Customize the error message and styling according to your application's needs.

This is a basic example, and you can extend it to include more complex validation logic based on your requirements. Remember that AngularJS has reached its end of life, and it is recommended to migrate to Angular (version 2 and above) for continued support and features.