Angular AJAX 验证器。在验证过程中防止提交的最佳方法是什么？答案

【问题标题】：Angular AJAX validator. Best way to prevent submission while validation in progress?Angular AJAX 验证器。在验证过程中防止提交的最佳方法是什么？
【发布时间】：2015-08-27 08:17:21
【问题描述】：

使用 Angular 表单，很容易看出表单是 $valid 还是 $invalid。这很好，我只允许用户提交 $valid 的表单。

但是，有没有一种简单的方法可以表明它正在验证过程中？（我们也不清楚它是有效还是无效）

如果您正在检查（例如）电子邮件地址是否有效，这是可取的。在 AJAX 调用返回之前，我不想将该字段标记为 $invalid（否则我可能会在没有错误时向用户显示错误）。但如果我们仍在检查电子邮件地址，我不希望他们能够提交......

有什么建议吗？

我用于 AJAX 验证器的代码基于 AngularJS: integrating with server-side validation（感谢 @BenLesh）。

function linkFunc(scope, el, attr, ctrl) {
  // When the scope changes, check the email.
  scope.$watch(attr.ngModel, validate);

  function validate (value)
  {
    // Show as valid until proven invalid
    ctrl.$setValidity('validateEmail', true);

    // if there was a previous attempt, stop it.
    if(timeoutId) {
      clearTimeout(timeoutId);
    }

    timeoutId = setTimeout(function() {
      // Make $http call and $setValidity
      $http.get(url)
      .then(function(data) {
        ctrl.$setValidity('validateEmail', data.isValid);
      });
    }, 200);
  }
}

【问题讨论】：

标签： javascript ajax angularjs validation

【解决方案1】：

您可以在处理 ajax 请求时禁用按钮。你也可以使用fieldset 来实现类似的逻辑，也可以查看它的手册fieldset。

function validate (value)
{
  ctrl.waitingForAjax = true; // disable the required part while waiting for the response      // Show as valid until proven invalid
  ctrl.$setValidity('validateEmail', true);

  // if there was a previous attempt, stop it.
  if(timeoutId) {
    clearTimeout(timeoutId);
  }

  timeoutId = setTimeout(function() {
    // Make $http call and $setValidity
    $http.get(url)
    .then(function(data) {
      ctrl.$setValidity('validateEmail', data.isValid);
      ctrl.waitingForAjax = false; // you can enable your button once you got the response
    });
  }, 200);
}

那么在你看来：

<button ng-disabled="waitingForAjax" ../>

【讨论】：

谢谢 - v 显而易见的答案。我对其进行了一些调整，以设置 ctrl.validating = true。然后在我看来，我检查了 vm.formName.emailFieldName.validating（我使用了控制器时的 vm：vm）。
谢谢，您也可以使用$http.pendingRequests查看全局是否有待处理的请求。将来可能对您有用。