Betrachten wir eine Form ungültig, während asynchroner Validator Versprechen anhängig

Question

Ich habe einen Asynchron-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 
    }; 
}]); 

Formularvorlage:

<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: Ich möchte meine Begleit Form ungültig sein, während die myValidator Versprechen steht aus.

Ich kenne zwei Möglichkeiten, um ein Formular ungültig zu machen, während Async-Validatoren ausstehen, aber sie sind sowohl ausführlich und/oder 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> 

Ich mag Abhilfe 1 nicht, weil ich einen anderen Validator markieren (async) als ungültig, welche Effekte unbeabsichtigte Neben haben kann, und ich weiß nicht, wie Abhilfe 2, weil ich kann nicht länger vertrauen form.$valid von selbst.

Kennt jemand eine saubere Lösung?

Answer 1

Sie können $pending verwenden, um zu testen, ob ein Async-Validator für das gesamte Formular oder ein bestimmtes Eingabeelement aussteht. Ich fügte auch einen Test auf $pristine hinzu, um Fehlermeldungen zu verstecken, wenn die Seite lädt und ng-disabled anstelle von disabled auf der button verwendete.

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