Javascript AngularJS中的ngMessages验证不'；t清除CSS中的错误消息

你知道为什么我一直有红色下划线错误，即使没有错误和验证通过罚款

我有自己的指令来匹配这两个密码，我使用的是有角度的材质

此处的工作代码：

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:

客户电子邮件
您的电子邮件长度必须介于10到100个字符之间，并且看起来像电子邮件地址。
密码
必修的。
密码必须介于8到20个字符之间。
确认密码
请确认您的密码。
密码不匹配。




projectForm.password.$error={{{projectForm.password.$error | json}
projectForm.password.$toucted={{projectForm.password.$toucted | json}


projectForm.password_c.$error={{{projectForm.password_c.$error | json}
projectForm.password_c.$touch={{projectForm.password_c.$touch | json}

此处的工作代码：

---

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

---

这是一个有效的

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

ctrl.$validators.noMatch=函数（值）{
//如果尚未提供任一密码，则返回true
如果（！attrs.validPasswordC | |！值）{
返回true；
}
返回值===attrs.validPasswordC；
}

---

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

谢谢！我会这么做的。。。只是想知道，“将您的指令与表单解耦”是什么意思？现在，由于您直接在指令中引用您的projectForm.password模型，因此该指令不太可重用。您也可以将该值作为指令的属性传递，并在检查密码是否匹配时使用该属性，而不是像那样从您的模型中获取$viewValue。我理解您的意思，但如何将该值作为指令的属性传递？我是新手

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

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

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