Question

I am trying to display an error message generated on the server to display after returning to an angular async validator.

Here is my validator:

(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]);
}())

Here is the 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>

What am I missing? Obviously there is something.

Answer 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;
            };
        }
    };
});

 <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}"
                                >

Angularjs async validator How can I get custom error message to display

1 个答案: