Question

我试过这段代码：

   .directive('uniqueUsername', function (isUsernameAvailable) {
        return {
            restrict: 'A',
            require: 'ngModel',
            link: function (scope, element, attrs, ngModel) {
                ngModel.$asyncValidators.uniqueName = isUsernameAvailable;
            }
        };
    })
    .directive("isMinSix", function () {
        return {
            restrict: "A",
            require: "ngModel",
            link: function (scope, element, attributes, ngModel) {
                ngModel.$validators.isMinSix = function (modelValue) {
                    if (modelValue != null && modelValue.length < 6) {
                        return true;
                    } else {
                        return false;
                    }
                }
            }
        }
    })
    .factory('isUsernameAvailable', function (appConstant, $q, $http) {
        return function (username) {
            var deferred = $q.defer();
            var url = appConstant.baseUrl + '/api/user/existsByName';
            $http({
                url: url,
                method: "PUT",
                data: {
                    userName: username
                }
            }).then(function () {
                    // Found the user, therefore not unique.
                    deferred.reject("User name is taken");
                }, function () {
                    // User not found, therefore unique!
                    deferred.resolve();
                });
            return deferred.promise;
        }
    })

我的问题是，当我将这两个指令仅添加到输入中，然后在检查中放入一个调试点时，只会触发一个或另一个。我不能让它们同时正常工作：

                <input class="inputField"
                       id="registerUserName"
                       name="registerUserName"
                       is-min-six
                       ng-model="aus.registerUserName"
                       ng-model-options="{ debounce: 3000 }"
                       ng-required="true"
                       placeholder="Username"
                       type="text"
                       unique-username
                       value="" />

有没有人有任何想法我可能做错了什么？

Answer 1

可以有多个验证器，但异步验证器只有在同步验证器通过后才会运行。这可以在documentation和source code：

中找到

此外，所有异步验证器只会在所有同步验证器通过后运行。

这是有道理的，因为异步验证器很可能是远程过程，如果该字段无效则会浪费。当然，可以修改上面链接的源代码，使其以您的首选方式工作，这似乎总是运行异步验证器。

Answer 2

根据这个不错的资源http://www.yearofmoo.com/2014/09/taming-forms-in-angularjs-1-3.html

异步验证将不会运行，除非所有先前正常验证器（ngModel。$ validators中存在的验证器）具有通过。这种限制允许开发人员（是的你）阻止验证器在进行过多的后端调用时用户名输入数据无效。

另外，我对指令名称isMinSix感到困惑，如果modelValue.length＆lt; 6。 Angular中有内置指令minlength和maxlength。

是否可以在Angular字段上拥有多个自定义验证器？

2 个答案: