Cân nhắc một hình thức không hợp lệ trong khi lời hứa async validator đang chờ

Question

Tôi có một validator async:

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 mẫu:

<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> 

Vấn đề: Tôi muốn hình thức kèm theo của tôi là không hợp lệ trong khi lời hứa myValidator đang chờ xử lý.

Tôi biết hai cách để vô hiệu hóa biểu mẫu trong khi trình xác thực không đồng bộ đang chờ xử lý, nhưng chúng đều là tiết và/hoặc 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> 

tôi không thích cách giải quyết 1 vì tôi đánh dấu một validator (async) là không hợp lệ, trong đó có thể có tác dụng phụ ngoài ý muốn, và tôi không thích cách giải quyết 2 bởi vì tôi có thể không tự tin hơn form.$valid.

Có ai biết giải pháp sạch không?

Answer 1

Bạn có thể sử dụng $pending để kiểm tra xem một số trình xác thực không đồng bộ đang chờ xử lý trên toàn bộ biểu mẫu hoặc một yếu tố đầu vào cụ thể. Tôi cũng đã thêm một thử nghiệm trên $pristine để ẩn thông báo lỗi khi trang tải và sử dụng ng-disabled thay vì disabled trên 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>