I have an async validator:
app.directive('validateBar', ['$http', function($http) {
function link($scope, $element, $attrs, ngModel) {
ngModel.$asyncValidators.myValidator = function(value) {
return $http.get('/endpoint/' + value);
};
}
return {
require: 'ngModel',
link: link
};
}]);
Form template:
<form name="myForm" ng-submit="foo.$valid && saveForm()">
<input name="bar" ng-model="bar" data-validate-bar>
<p ng-show="myForm.bar.$error.myValidator">Your bar is wrong</p>
<button disabled="myForm.$invalid">
</form>
Problem: I want my accompanying form to be invalid while the myValidator
promise is pending.
I know two ways to invalidate a form while async validators are pending, but they're both verbose and/or hacky.
// Workaround 1: Mark another validator as invalid while the validator promise is pending.
// I cannot mark 'myValidator' as invalid, gets set to valid immediately by Angular.
app.directive('validateSomething', ['$http', function($http) {
function link($scope, $element, $attrs, ngModel) {
ngModel.$setValidity('async', false);
ngModel.$asyncValidators.myValidator = function(value) {
return $http.get('/endpoint/' + value).then(function() {
ngModel.$setValidity('async', true);
});
};
}
return {
require: 'ngModel',
link: link
};
}]);
<!-- Workaround 2: Prevent submitting through the UI -->
<form name="myForm" ng-submit="myForm.$valid && !myForm.$pending && saveForm()">
<input name="bar" ng-model="bar" data-validate-bar>
<p ng-show="myForm.bar.$error.myValidator">Your bar is wrong</p>
<button disabled="myForm.$invalid || myForm.$pending">
</form>
I don't like workaround 1 because I mark another validator (async
) as invalid, which may have unintended side effects, and I don't like workaround 2 because I can no longer trust form.$valid
by itself.
Does anyone know a clean solution?
You can use $pending
to test if some async validator is pending on the whole form or a specific input element. I also added a test on $pristine
to hide error messages when the page loads and used ng-disabled
instead of disabled
on the button
.
<form name="myForm" ng-submit="foo.$valid && saveForm()">
<input name="bar" ng-model="bar" data-validate-bar>
<div ng-show="! myForm.$pristine">
<p ng-show="myForm.bar.$pending.myValidator || myForm.bar.$error.myValidator">Your bar is wrong</p>
</div>
<button ng-disabled="myForm.$invalid || myForm.$pending">Do smth</button>
</form>