Can I programmatically apply Angular validation directives inside a custom directive?

Question

I have found great many occurrences of the following pattern for html inputs, this being for phone numbers:

<input type="text" ng-model="CellPhoneNumber" required ng-pattern="/^[0-9]+$/" ng-minlength="10" /> 

I would like to create a custom directive that, wherever applied, will tell Angular to apply all three of these rules, e.g:

<input type="text" ng-model="CellPhoneNumber" bk-ng-validation="phoneNumber"/> 

Then, code in my directive would find and invoke a function called phoneNumber, in which I would like to see something like:

Listing 1:

function bkNgPhoneNumber(model) {     // This is purely SPECULATIVE pseudo-code, just to convey an idea.     model.errors.add(applyMinLength(10, model));     model.errors.add(applyMaxLength(15, model));     model.errors.add(applyPattern("/^[0-9]+$/", model)); } 

I would prefer the above approach over 'rewriting code for these rules, e.g:

Listing 2:

function phoneNumber(model) {     if (model.length < 10 || model.length > 15) {         model.errors.add("Must be 10 to 15 chars!");     } } 

I don't want to do away with all attribute based directives, but preferably create a 'macro' directive that will invoke my Listing 1 code, which will intern invoke a set of more 'micro' validations.

Answer 1

One way to do this (i.e. apply existing validators without writing their code again) would be to add the validation directives' respective attributes and force a re-compile. This would require your directive to have a high-enough priority and also be terminal: true.

app.directive("bkNgValidation", function($compile){   return {     priority: 10000,     terminal: true,     link: function(scope, element){       element.attr("ng-required", "true");       element.attr("ng-minlength", 20);       element.attr("ng-maxlength", 30);        // prevent infinite loop       element.removeAttr("bk-ng-validation");        $compile(element)(scope);     }   }; }); 

Demo

Answer 2

If you're using more validations, you can create a service that is responsible for identifying and validating the elements, without any limitation. Default directives of angular remain.

Example:

    module.service('$Validation', ["$compile",function($compile){          this.validators = {             'phoneNumber': [['required', 1], ['minlength',6], ['maxlength', 10], ['pattern', /^[0-9]+$/.source]],             'phoneNumber2Custom': function(value){                  return /^[0-9]{6,10}$/.test(value)              },             'userTwitter': function(value){                 return /^@(.+)/.test(value)             }             // ...etc... /         }          this.add = function(scope, element, attrs, model){             var name = attrs.bkNgValidation, type;             if(!(type = this.validators[name])) return;             else if(angular.isFunction(type)) return (model.$validators[name] = type);              element.removeAttr("bk-ng-validation");             angular.forEach(type, function(expr){                 element.attr(expr[0], expr[1])             });             $compile(element)(scope)                 };      }]).directive('bkNgValidation', ["$Validation", function ($Validation) {         return {             require: '?ngModel',             priority: 1e5,             link: function(){                 $Validation.add.apply($Validation, arguments);             }         }     }]) 

Demo