AngularJS中的ngMessages验证无法清除CSS中的错误消息

Question

Do you know why I keep having the red color underline error even when there is no error and validation passed fine??

I have my own directive to match both password and I'm using Angular material.

WORKING CODE HERE::::::::::::::

http://codepen.io/anon/pen/gPrMRM

http://codepen.io/anon/pen/gPrMRM

Angular app and js:

angular.module('MyApp', ['ngMaterial', 'ngMessages'])

.controller('AppCtrl', function ($scope) {
    $scope.project = {
        description: 'Nuclear Missile Defense System',
        rate: 500
    };
})
.directive('validPasswordC', function () {
    return {
        require: 'ngModel',
        link: function (scope, elm, attrs, ctrl) {
            ctrl.$parsers.unshift(function (viewValue, $scope) {
                var noMatch = viewValue != scope.projectForm.password.$viewValue;
                scope.projectForm.password.$error = {};
                ctrl.$setValidity('noMatch', !noMatch);
                console.log("scope.projectForm.password.$error: ");
                console.dir(scope.projectForm.password.$error);
            })
        }
    }
});

HTML:

<div ng-controller="AppCtrl" layout="column" ng-cloak="" class="inputdemoErrors" ng-app="MyApp">
    <md-content layout-padding="">
        <form name="projectForm">
            <md-input-container class="md-block">
                <label>Client Email</label>
                <input required="" type="email" name="clientEmail" ng-model="project.clientEmail" minlength="10" maxlength="100" ng-pattern="/^.+@.+\..+$/">
                <div ng-messages="projectForm.clientEmail.$error" role="alert">
                    <div ng-message-exp="['required', 'minlength', 'maxlength', 'pattern']">
                        Your email must be between 10 and 100 characters long and look like an e-mail address.
                    </div>
                </div>
            </md-input-container>

            <md-input-container class="md-block">
                <label for="password">Password</label>
                <input type="password" id="password" name="password" ng-model="formData.password" ng-minlength="8" required />

                <div ng-messages="projectForm.password.$error" ng-show="projectForm.password.$touched || projectForm.$submitted">
                    <div ng-message="required">required.</div>
                    <div ng-message="minlength">Passwords must be between 8 and 20 characters.</div>
                </div>
            </md-input-container>
            <md-input-container class="md-block">
                <label for="password_c">Confirm Password</label>
                <input type="password" id="password_c" name="password_c" ng-model="formData.password_c" valid-password-c required />
                <div ng-messages="projectForm.password_c.$error" ng-show="projectForm.password_c.$touched || projectForm.$submitted">
                    <div ng-message="required">Please confirm your password.</div>
                    <div ng-message="noMatch">Passwords do not match.</div>
                </div>
                <br /><br /><br />
                <pre>projectForm.password.$error = {{ projectForm.password.$error | json }}</pre>
                <pre>projectForm.password.$touched = {{ projectForm.password.$touched | json }}</pre>
                <br />
                <pre>projectForm.password_c.$error = {{ projectForm.password_c.$error | json }}</pre>
                <pre>projectForm.password_c.$touched = {{ projectForm.password_c.$touched | json }}</pre>
            </md-input-container>
        </form>
    </md-content>
</div>

WORKING CODE HERE::::::::::::::

http://codepen.io/anon/pen/gPrMRM

http://codepen.io/anon/pen/gPrMRM

Answer 1

It is because you have a $parser that is not returning a value. You should change your directive to use the validators pipeline instead of the parsers.

<input type="password" id="password_c" name="password_c" required
       ng-model="formData.password_c"
       valid-password-c="{{formData.password}}" />


ctrl.$validators.noMatch = function (value) {

    // Return true if either of the passwords have not been provided yet
    if (!attrs.validPasswordC || !value) {
        return true;
    }

    return value === attrs.validPasswordC;
}

Updated to pass original password as attribute

Answer 2

You forgot to return the viewValue from the $parser function:

    ctrl.$parsers.unshift(function (viewValue, $scope) {
                var noMatch = viewValue != scope.projectForm.password.$viewValue;
                scope.projectForm.password.$error = {};
                ctrl.$setValidity('noMatch', !noMatch);
                console.log("scope.projectForm.password.$error: ");
                console.dir(scope.projectForm.password.$error); 
                return viewValue;
            })

Here's a working codepen