javascript - AngularJS 中的 ngMessages 验证不会清除 CSS 中的错误消息

Question

你知道为什么即使没有错误并且验证通过，我仍然会出现红色下划线错误吗？

我有自己的指令来匹配密码，并且我正在使用 Angular 材料。

这里的工作代码:::::::::::::::

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

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

Angular 应用程序和 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>

这里的工作代码:::::::::::::::

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

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

Answer 1

这是因为您有一个不返回值的 $parser。您应该更改指令以使用验证器管道而不是解析器。

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

更新为将原始密码作为属性传递

Answer 2

您忘记从 $parser 函数返回 viewValue：

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

这是一个有效的代码笔