我有一个异步验证器:
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 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>
问题:我希望随附的表单在myValidator
承诺待处理期间无效。
我知道在异步验证器挂起时使表单无效的两种方法,但它们既冗长又/或笨拙。
// 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>
我不喜欢解决方法 1,因为我将另一个验证程序 ( async
) 标记为无效,这可能会产生意想不到的副作用,而且我不喜欢解决方法 2,因为我不能再信任form.$valid
本身。
有谁知道一个干净的解决方案?
您可以使用
$pending
来测试整个表单或特定输入元素上是否挂起了某个异步验证器。我还在$pristine
上添加了一个测试,以便在页面加载时使用ng-disabled
而不是disabled
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>