AngularJS:在异步验证器完成之前阻止表单提交

Question

我想防止在异步验证器正在运行或将运行时启用提交按钮。

我有一个自定义指令，其中我正在侦听输入上的更改事件。此输入元素上是一个异步验证程序，该验证程序将在触发输入值更改事件时触发。

input.on('change', function () {
      ngModel.$setViewValue(input.val(), 'change');
});
ngModel.$asyncValidators.modelValue = function () { ... }

问题是，在用户取消聚焦输入元素之前，异步验证器不会触发。这是一个问题，因为在异步验证程序触发之前，表单上的$pending字段不会更新。我希望能够执行以下操作来阻止提交表单：

<button ng-disabled="form.$invalid || form.$pending" ng-click="form.submit()">Submit</button>

但是，即使异步验证器将在不久的将来运行，表单仍然可以提交，因为$pending尚未更新，因为用户尚未取消聚焦输入元素。只要用户专注于输入元素，就可以提交表单。

在 AngularJS 中处理这个问题的正确方法是什么？

Answer 1

尝试在keydown上设置一个特殊的范围参数，以禁用提交。然后在异步回调触发时将其关闭。

.js：

input.on('keydown', function () {
  $scope.needsValidation = true;
});
ngModel.$asyncValidators.modelValue = function () {
 ...
 $scope.needsValidation = false;    
 ... 
}

目录：

<button ng-disabled="form.$invalid || form.$pending || needsValidation" ng-click="form.submit()">Submit</button>