title: Consider a form invalid while async validator promises are pending
body: <p>I have an async validator:</p>
  
  <pre><code>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
      };
  }]);
  </code></pre>
  
  <p>Form template:</p>
  
  <pre><code>&lt;form name="myForm" ng-submit="foo.$valid &amp;&amp; saveForm()"&gt;
      &lt;input name="bar" ng-model="bar" data-validate-bar&gt;
      &lt;p ng-show="myForm.bar.$error.myValidator"&gt;Your bar is wrong&lt;/p&gt;
      &lt;button disabled="myForm.$invalid"&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>Problem: I want my accompanying form to be invalid while the <code>myValidator</code> promise is pending.</p>
  
  <p>I know two ways to invalidate a form while async validators are pending, but they're both verbose and/or hacky.</p>
  
  <pre><code>// 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
      };
  }]);
  </code></pre>
  
  <hr>
  
  <pre><code>&lt;!-- Workaround 2: Prevent submitting through the UI --&gt;
  &lt;form name="myForm" ng-submit="myForm.$valid &amp;&amp; !myForm.$pending &amp;&amp; saveForm()"&gt;
      &lt;input name="bar" ng-model="bar" data-validate-bar&gt;
      &lt;p ng-show="myForm.bar.$error.myValidator"&gt;Your bar is wrong&lt;/p&gt;
      &lt;button disabled="myForm.$invalid || myForm.$pending"&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>I don't like workaround 1 because I mark another validator (<code>async</code>) as invalid, which may have unintended side effects, and I don't like workaround 2 because I can no longer trust <code>form.$valid</code> by itself.</p>
  
  <p>Does anyone know a clean solution?</p>