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

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

It is not understood where you set vt.serverError.

I did something similar to what you need.

The idea is to call a function as a callback in validator. In this callback you can set a message which then show with {{vt.serverError}}.

For example

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

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