I created a custom input control and trying to perform certain validation on blur. But its not performing as expected. I want to use template like below instead of using jquery specific element.bind('blur')
template: '<input type="text" ng-blur="performvalidation()">',
Please guide or correct what am I doing wrong. Thanks.
If you want to create custom validators you should add them to the ngModelController's $validators field. e.g.
angular.module('app').directive('strongSecret', function() {
return {
restrict: 'A',
require: 'ngModel',
link: function(scope, element, attr, ctrl) {
ctrl.$validators.uppercaseValidator = function(value) {
return /[A-Z]/.test(value);
}
ctrl.$validators.numberValidator = function(value) {
return /[0-9]/.test(value);
}
ctrl.$validators.sixCharactersValidator = function(value) {
return value.length === 6;
}
}
};
});
Also instead of giving your directive a template you should just use it on an input element
<input ng-model="strongSecret" strong-secret name="strongSecret"/>
if you don't want to show the errors until the user clicks away from the input field you could do this
<ul ng-if="sampleForm.strongSecret.$touched" class="error-msgs" ng-messages="sampleForm.strongSecret.$error">
...
</ul>
Working jsFiddle: https://jsfiddle.net/e81kee9z/2/
