Directive
Creating a custom directivecontact-validator
and applying it to the ng-form
directive I am able to setup the asyncValidator
on the entire model.
app.directive('contactValidator', function($q, $http) { return { restrict: 'A', require: 'ngModel', link: function(scope, element, attrs, ngModel) { ngModel.$asyncValidators.contact = function(model) { ... } } } });In order to catch all the model updates a
$watch
is applied with the deep checking enabled.
scope.$watch(attrs.ngModel, function(model) { if (model != null) { ngModel.$validate(); } }, true);You may want to review the ngModel directive documentation and the advanced features it contains.
Model Options
Model options are important because without them then the entire model will be cleared if validation fails.ng-model-options="{allowInvalid: true}"
Things to consider
When using this method consider changing the validation event on each input field to on blur instead of on keypress to reduce the chattyness of the validations events.ng-model-options="{updateOn:'blur'}"In low latency environments where the web server and you are in the same office this can provide a quick way to extend the server side validation directly to the browser. Remember it will be more performant to have your client side code do as much of the validation as possible. But when you need it this method is available.