改变异步验证器的运行方式答案

【问题标题】：Change the way async validators run改变异步验证器的运行方式
【发布时间】：2019-04-05 05:39:25
【问题描述】：

是否可以先更新模型，然后运行验证器？我有一个异步验证器，它在更新输入时运行（类型 range）。

我想要的是先更新 HTML 模板上的值，然后运行验证器。默认行为是先运行验证器，如果验证完成则更新模型。

请参考下面的sn-p：

angular.module('app', [])
  .controller('ctrl', ($scope) => {
    $scope.value = 0;
  })
  .directive('validateValue', ($http) => {
    return {
      require: 'ngModel',
      scope: false,
      link: linkFn
    };

    function linkFn(scope, elem, attrs, modelCtrl) {
      modelCtrl.$asyncValidators.validValue = (m, v) => {
        return $http.get('https://httpbin.org/delay/1');
      };
    }
  });

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div ng-app="app">
  <div ng-controller="ctrl">
    <form>
      <input type="range" ng-model="value" ng-model-options="{debounce: 100}" validate-value> {{value}}
    </form>
  </div>
</div>

【问题讨论】：

标签： javascript angularjs validation

【解决方案1】：

使用allowInvalid: true。从逻辑上讲，这是有道理的 - 如果您想在验证之前更改值，您应该允许模型中的无效值。

ng-model-options="{debounce: 100, allowInvalid: true}"

【讨论】：

谢谢！我以前用过allowInvalid，但由于debounce，我不确定它是否真的这样做。