angularJS $asyncValidators 和 $http.get答案

【问题标题】：angularJS $asyncValidators with $http.getangularJS $asyncValidators 和 $http.get
【发布时间】：2016-03-29 17:24:50
【问题描述】：

问题是这样的。如何将函数（响应）结果返回给 ngModel.$asyncValidators.usernameAvailable。如果用户存在，则 $http.get 中指定的 url 返回 true，否则返回 false。附： response.data 返回正确的答案，我检查了。

app.directive('usernameAvailableValidator',['$http', function($http){
    return{
        restrict : 'A',
        require : 'ngModel',
        link : function(scope, element, attrs, ngModel){
            ngModel.$asyncValidators.usernameAvailable =  function(username){
                return $http.get('/auth/username/exists/'+username).
                    then(function(response){return response.data});
            };
        }
    }
}])

【问题讨论】：

标签： angularjs http angularjs-directive get

【解决方案1】：

异步验证器期望在验证失败的情况下被拒绝。这意味着如果用户存在，您需要拒绝您的承诺。在您的情况下，只需使用 $q.reject 就足够了：

app.directive('usernameAvailableValidator', ['$q', '$http', function($q, $http) {
    return {
        restrict: 'A',
        require: 'ngModel',
        link: function(scope, element, attrs, ngModel) {
            ngModel.$asyncValidators.usernameAvailable = function(username) {
                return $http.get('/auth/username/exists/' + username).
                then(function(response) {
                    if (response.data) return $q.reject();
                });
            };
        }
    }
}])

【讨论】：

很好的答案，但您不需要在有效时也明确解决吗？
@danday74 无论如何，如果你不明确地承诺，承诺就会得到解决。虽然有 undefined 值，但对于这个验证器来说并不重要。
啊，我看到通过返回 $http 服务调用，您正在返回一个承诺，该承诺会在 $http 请求完成时解决。

【解决方案2】：

您应该转储表单属性。例如

<form name="fred" novalidate> 
    ...     
</form>

<div>{{ fred }}</div>

您应该会看到大量有效值和无效值。一个应该与 usernameAvailable 相关。在您的 asyncValidator 中，您可能需要使用 $q.resolve() 和 $q.reject() 来判断有效和无效。

请注意，您可以依赖 $http（而不是使用 $q），因为 $http 返回一个承诺，但这仅在您想解决 2xx 响应并拒绝所有其他响应时才有效，这似乎不是案例在这里。

除非你使用 ...

，否则拒绝绑定也会失败

data-ng-model-options='{allowInvalid:true}'

【讨论】：