How to create a directive that validates input fields based on regex patterns

Question

Can i know How to create a directive that validates input fields based on regex patterns?

Answer 1

You can define a custom directive that uses ngModelController for validation.

AngularJS Custom Directive with Regex Validation

app.directive('regexValidator', function() {

  return {

    require: 'ngModel',

    scope: {

      pattern: '@regexValidator'

    },

    link: function(scope, element, attrs, ngModel) {

      ngModel.$validators.regex = function(modelValue, viewValue) {

        var value = modelValue || viewValue;

        var regex = new RegExp(scope.pattern);

        return regex.test(value);

      };

    }

  };

});

HTML:

<input type="text" name="email" ng-model="user.email" regex-validator="^[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$" required />

<span ng-show="form.email.$error.regex">Invalid email format!</span>