Question

我创建了这段代码：

         <input class="inputField"
                       id="registerUserName"
                       name="registerUserName"
                       ng-model="aus.registerUserName"
                       ng-model.$asyncvalidators.unique="aus.isUsernameAvailable";
                       ng-model-options="{ debounce: 2000 }"
                       ng-minlength="5"
                       ng-required="true"
                       placeholder="Username"
                       type="text"
                       value="" />


isUsernameAvailable = function {
    return true;
}

但似乎我的验证器没有被调用。我看到的所有示例都为asyncvalidators创建了一个指令。是否可以在不创建像我尝试的指令的情况下完成它？

Answer 1

是的，你必须创建一个指令。您显示的代码示例有点尝试在javascript中使用html。

您需要访问要验证的元素上的ng-model控制器（据我所知），您只能通过创建另一个指令并在指令定义中使用require来执行此操作对象

你也可以制作一个指令来接受一个表达式，以便像你在那里那样添加asyncvalidators。

它看起来像这样:(未经过测试，可能不是正常工作的代码！）

angular.module('app', [])
.directive('useAsyncValidators', function (){
  return {
    restrict: 'A',
    // you need this line to access ngModel controller (4th arg to link)
    require: 'ngModel',

    link: function (scope, element, attributes, ngModel) {
      // assume we pass an object with validatorname: validatorFunction fields.
      validators = scope.$eval( attributes.useAsyncValidators );
      for(var validator in validators) {
        // check the validator is a function
        if typeof validators[validator] === "function"
          // set validator on ngModelController
          ngModel.$asyncValidators[validator] = validators[validator];
      }
    }
}

// Which you could then use with the following:
.controller('validateTestController', function ($scope, $timeout) {

  delayedValidator = function () {
    return $timeout(true, 1000);
  };

  alwaysTrue = function () {
    return true;
  };

  $scope.validators = {
    isNameAvailable: alwaysTrue,
    isEmailAvailable: delayedValidator
  }
});

然后使用以下标记：

<form ng-controller="validateTestController">
  <input class="inputField"
         ng-model="whatever"
         use-async-validators="validators" />
</form>

等

这将导致使用isNameAvailable函数调用alwaysTrue验证字段，使用isEmailAvailable使用delayedValidator验证另一个字段。

很明显，这些验证器功能确实没有意义，但希望您可以看到只需要几行代码就可以制作一个通用指令来执行您在标记中尝试执行的操作。

我是否必须创建一个使用$ asyncValidators的指令

1 个答案: