javascript - 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;    
 ... 
}

HTML:

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