Truly custom validators in AngularJs over HTML5

We started facing problems with validations that we had written in AngularJs when we changed the type of our input fields to tel, email etc from text.

Essentially, AngularJs was not binding values that do not match the declared type. This meant that values not matching the expected format were triggering isEmpty validations instead of pattern validations. Since angular-validations were too dynamic (on blur) for our needs, we still had to persist with the legacy validators.

The solution was to hook into angular parsing and ask angular to accept any value that is entered instead of rejecting the invalid values which was the default behavior.

 
myApp.directive("myDctv", function() { 
    return { 
        require: '^ngModel',
        link: function(scope, element, attrs, ngModelControl){
           ngModelCtrl.$parsers.push(function (viewValue) {
                return viewValue;
           }) 
        }
    } 
}); 
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s