AngularJS : Why is my field invalid?

问题

I have a custom validation for password

app.directive('userPassword', function() {
    return {
        restrict: 'A',
        require: 'ngModel',
        link: function(scope, elm, attrs, ctrl) {
            ctrl.$validators.myValidator = function(modelValue, viewValue) {
                var msg = helper.validation.user.localPassword(modelValue)
                ctrl.$error.message = msg
                ctrl.required = helper.validation.user.localPassword()
                return ! msg
            }
        }
    }
})

This is my password html:

<div class="my-form-group">
    <label for="signup_password">Password:</label>
    <input ng-model="password" type="password" name="password" id="signup_password" 
        placeholder="Enter Password"
        user-password ng-required="signupForm.password.required" class="my-form-control">
</div>

When I enter abcd, the returned value of the directive link function is true. When I inspect the element, I got this:

class="my-form-control ng-invalid ng-dirty ng-valid-parse ng-valid-required ng-valid-my-validator ng-touched" 

As you can see, both required and my-validator is valid (ng-valid-required and ng-valid-my-validator. Why is my class still ng-invalid?

When I inspect the entire form, it is ng-valid

Update. If I use scope instead of ctrl, it's working.

ctrl.$validators.myValidator = function(modelValue, viewValue) {
    var msg = helper.validation.user.localUsername(modelValue)

    scope.userUsername = {}
    scope.userUsername.message = msg
    scope.userUsername.required = helper.validation.user.localUsername()
    return ! msg
};

And in HTML

<input ng-model="username" type="text" name="username" id="signin_username" 
       placeholder="Enter Username"
       user-username ng-required="userUsername.required" class="my-form-control">

<div ng-show="signinForm.username.$touched && userUsername.message">
    {{userUsername.message}}
</div>

But I dont want to pollute the controller scope. How can I use ctrl instead of scope

Edit: You can add the following style to the header. The input field is always red.

http://plnkr.co/edit/deAQoIw4KfekIh3ZOt1j?p=preview

<style>

    input.ng-invalid.ng-touched {
      background-color: #FA787E;
    }

    input.ng-valid.ng-touched {
      background-color: #78FA89;
    }

    input.ng-pending.ng-touched {
      background-color: #b3933b;
    }
</style>

回答1:

This is my implementation for username field. Password should be pretty much the same.

                var def = $q.defer()
                ctrl.message = 'checking the server for username unique'
                restService.checkIsUsernameUnique(modelValue, function() {
                    ctrl.message = 'ok its unique username'
                    def.resolve()
                }, function(err) {
                    ctrl.message = err.message
                    def.reject()
                })
                return def.promise;

And in HTML

            <div ng-show="form.username.$touched && form.username.message">
                {{form.username.message}}
            </div>

In short, do not put message inside ctrl.$error if you want to put non-error message as well

来源：https://stackoverflow.com/questions/31487733/angularjs-why-is-my-field-invalid