AngularJS - 为什么当其他验证器失败时不调用异步验证器？

Question

不是我不喜欢什么的，而是问题在于同步验证器的行为不同。即使其他验证器之前失败，它们也总是被调用。因此，验证器中存在不均匀的行为，这也可能导致一些问题。

我用一个简单的程序测试了所有这些。

我创建了一个同步验证器和一个异步验证器，它们的验证完全相同。 在两个验证器中，我以“典型”方式提交错误：

ctrl.$validators.sync= function(modelValue,viewValue){...

我还提交了一个附加错误（例如告诉异步验证中存在连接问题）：

ctrl.$setValidity('syncplus',...

此外，除了不均匀的行为之外，额外的验证错误会导致异步验证器中的其他问题：

正如我所见，如果输入被修改，异步“典型”验证总是会立即重置。 （不知道在哪里） 但是额外的验证器永远不会重置。而且，由于在其他验证器失败时不会调用异步验证器，因此我无法更新附加验证器，因此仍然显示之前的错误，即使它可以是有效输入。

请try my program in plunker:

在这里你可以看到带有验证器的 js 代码：

angular.module('app',[])
.directive('async', function($q,$timeout){
    return{
        restrict: 'A',
        require: 'ngModel',
        link: function(scope, elm, attrs, ctrl){

            var nono_username= ['a','aa','aaa','aaaaa']; // SHOULD FAIL from 1 to 5 a's, BUT NOT with 4 a's

            ctrl.$asyncValidators.async= function(modelValue,viewValue){

                scope.data.called+= 'A'; // This way we know Async has been called
                var def= $q.defer();

                $timeout(function() { // Mock a delayed response
                    if(nono_username.indexOf(modelValue)===-1){ // The username is available
                        ctrl.$setValidity('asyncplus',true);
                        def.resolve();
                    } else {
                        ctrl.$setValidity('asyncplus',false);
                        def.reject();
                    }
                }, 200);

                return def.promise;
            };
        }
    };
})
.directive('sync', function($q){
    return{
        restrict: 'A',
        require: 'ngModel',
        link: function(scope, elm, attrs, ctrl){

            var nono_username= ['a','aa','aaa','aaaaa']; // SHOULD FAIL from 1 to 5 a's, BUT NOT with 4 a's

            ctrl.$validators.sync= function(modelValue,viewValue){
                scope.data.called+= 'S'; // This way we know Sync has been called
                ctrl.$setValidity('syncplus',nono_username.indexOf(modelValue)===-1);
                return nono_username.indexOf(modelValue)===-1;
            };
        }
    };
})
/* Maybe a solution for resetting asyncplus?
.directive('asyncplus', function($q){
    return{
        restrict: 'A',
        require: 'ngModel',
        link: function(scope, elm, attrs, ctrl){
            ctrl.$validators.asyncplus= function(modelValue,viewValue){
                return true;
            };
        }
    };
})
*/
.controller('Controller',['$scope',function($scope){
    $scope.data= {username:'',called:''};
}]);

结论：

• 为什么在其他验证器时不调用异步验证器 失败？
• 为什么没有重置额外的 $setValidity 验证器？
• 我能否以简单的方式重置所有验证器？ （我发现创建一个 具有相同名称的同步验证器，并将指令包含在 正如我在上面的注释代码中输入的那样，输入解决了它）
• 您认为避免所有这些问题的最佳选择是什么？ 我应该使用哪种解决方法？

Answer 1

如果你希望它像这样工作，你可以使用 $parsers 和 $formatters：

.directive('async', function($q,$timeout){
    return{
        restrict: 'A',
        require: 'ngModel',
        link: function(scope, elm, attrs, ctrl){

            var nono_username= ['a','aa','aaa','aaaaa']; // SHOULD FAIL from 1 to 5 a's, BUT NOT with 4 a's

            var validate = function(value) {

                $timeout(function() { // Mock a delayed response
                    if(nono_username.indexOf(value)===-1){ // The username is available
                        ctrl.$setValidity('asyncplus',true);
                    } else {
                        ctrl.$setValidity('asyncplus',false);
                    }
                }, 200);

                return value;
            };

            ctrl.$parsers.push(validate);
            ctrl.$formatters.push(validate);
        }
    };
})