Question

所以我是整个网络新手，今天我发现了$ asyncValidators。

经过大量的尝试后，我对这个例子感到困惑。

username.validator

(function() {

    angular
        .module('app')
        .directive('emailNotUsed',emailNotUsed);

    emailNotUsed.$inject = ['$http', '$q'];

    function emailNotUsed ($http, $q) {
        return {

            require: 'ngModel',
            link: function(scope, element, attrs, ngModel) {
                ngModel.$asyncValidators.emailNotUsed = function(modelValue, viewValue) {


                    console.log("start");
                    console.log(viewValue);
                   console.log($http.post('/email', viewValue));


                  $http.post('/email',viewValue).then(function(response) {
                        console.log("Check if email is valid in directive")
                        console.log(response.data)
                        return response.data == true ? $q.reject(response.data.errorMessage) : true;
                    });
                };
            }
        };
    }
}());

register.html

<div class="container" ng-controller="RegisterController as vm">
    <div class="col-md-6 col-md-offset-3">
        <h2>Register</h2>
        <div ng-show="vm.error" class="alert alert-danger">{{vm.error}}</div>
        <form name="form" ng-submit="!form.$pending && form.$valid && vm.register()" role="form">

            <div class="form-group" ng-class="{ 'has-error': form.email.$dirty && form.email.$error.required }">
                <label for="email">Email</label>
                <input type="text" name="email" id="email" class="form-control" ng-model="vm.user.email" email-not-used ng-model-options="{ debounce: 500 }" required />

                <div ng-messages="form.email.$error">
                    <div ng-message="emailNotUsed">User with this email already exists.</div>
                </div>
            </div>

            <div class="form-actions">
                <button type="submit" ng-disabled="form.$invalid || vm.dataLoading" class="btn btn-primary">Register</button>
                <a href="#/login" class="btn btn-link">Cancel</a>
            </div>
        </form>
    </div>
</div>

现在它变得奇怪了，这就是控制台中的输出

那么为什么在我获得承诺价值时会出错呢？知道怎么做

Answer 1

异步验证器希望返回promise，因此必须修改验证函数以返回$http调用的结果：

ngModel.$asyncValidators.emailNotUsed = function(modelValue, viewValue) {
    return $http.post('/email',viewValue).then(function(response) {
        return response.data == true ? $q.reject(response.data.errorMessage) : true;
    });
};

为什么angularjs中的$ asyncValidators返回一个promise但是未定义

1 个答案: