Angularjs异步验证器如何获取自定义错误消息以显示答案

【问题标题】：Angularjs async validator How can I get custom error message to displayAngularjs异步验证器如何获取自定义错误消息以显示
【发布时间】：2021-12-26 22:09:26
【问题描述】：

我正在尝试显示服务器上生成的错误消息，以便在返回到角度异步验证器后显示。

这是我的验证器：

(function () {
    var asyncValidatorTest = function ($http, $q) {
        return {
            restrict: "A",
            require: "ngModel",
            link: function (scope, elem, attrs, ngModel) {
                ngModel.$asyncValidators.asyncTest = function (modelValue, viewValue) {

                    var userInput = modelValue || viewValue;

                    var message = attrs[asyncValidatorTest];

                    return $http({
                        method: "POST",
                        url: "/AngularTest/AsyncValidatorTest",
                        data: { input: userInput }
                    })
                    .then(function (response) {
                        return true;
                    }, function (response) {

                        message = response.statusText;

                        return $q.reject(response.statusText);
                    });
                }
            }
        }
    }

    angular.module("angularApp").directive("asyncValidatorTest", ["$http", "$q", asyncValidatorTest]);
}())

这里是html：

<div class="form-group" ng-class="{'has-error': (testForm.$submitted && testForm.asyncValidateTest.$invalid) || (testForm.asyncValidateTest.$invalid && testForm.asyncValidateTest.$dirty)}">
            <label for="validateTest" class="control-label">Async Validate Test</label>
            <input type="text" name="asyncValidateTest" class="form-control" ng-model="vt.message" ng-model-options="{updateOn: 'blur'}" async-validator-test="vt.serverError" required />
            <span class="help-block" ng-show="(testForm.$submitted && testForm.asyncValidateTest.$error.required) || (testForm.asyncValidateTest.$error.required && testForm.asyncValidateTest.$dirty)">Input value is required.</span>
            <div ng-show="!testForm.asyncValidateTest.$error.required">
                <div ng-show="(testForm.$submitted && testForm.asyncValidateTest.$invalid) || (testForm.asyncValidateTest.$invalid && testForm.asyncValidateTest.$dirty)">
                    <span class="help-block">{{ vt.serverError }}</span>
                </div>
            </div>
        </div>

我错过了什么？显然有什么。

【问题讨论】：

标签： validation angularjs-directive

【解决方案1】：

不明白你在哪里设置vt.serverError。

我做了与你需要的类似的事情。

这个想法是在验证器中调用一个函数作为回调。在此回调中，您可以设置一条消息，然后以{{vt.serverError}} 显示。

例如

.directive('asyncValidator', function($http, $q,$log) {
    return {
        require: 'ngModel',
        link: function(scope, element, attrs, ngModel) {
            ngModel.$asyncValidators.failed = function(modelValue, viewValue) {
                var url = attrs['asyncValidator'];
                var callback =attrs['asyncValidatorCallback'],
                     fail_callback=attrs['asyncValidatorFailedCallback']
                if (url == "") {
                    $log.error('asyncValidator should show a validator url ex:async-validator="/validator/password/md5"')
                    return false;
                }
                var use_md5 = url.indexOf('md5')>-1;
                var deferred = $q.defer();

                if (!viewValue) {
                    deferred.reject('no value');
                    return deferred.promise;
                }

                $http.post(url, {data: use_md5?md5(viewValue):viewValue})
                    .then(function(data) {
                        if (typeof callback!='undefined')
                                scope.$eval(callback)
                           deferred.resolve(data);
                    })
                    .catch(function(error) {
                            if (typeof fail_callback!='undefined')
                                scope.$eval(fail_callback)
                            deferred.reject(error)
                    });
                return deferred.promise;
            };
        }
    };
});

这是 HTML：

<input type="password" autocomplete="false" class="form-control" id="password-real"
       name="password-real" placeholder="Password" ng-model="vm.password" required
       async-validator="/validator/password/md5"
       async-validator-callback="vm.getChallenge()"
       async-validator-failed-callback="vm.challenge=false"
       ng-model-options="{debounce:500}">

【讨论】：