Проверка ngMessages в AngularJS не очищает сообщение об ошибке в CSS

Question

Знаете ли вы, почему я продолжаю иметь красную подчеркнутую ошибку цвета даже тогда, когда нет ошибки, и проверка прошла успешно?

У меня есть своя директива, чтобы соответствовать как паролю, и я использую Угловой материал.

РАБОЧИЙ КОД ЗДЕСЬ ::::::::::::::

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

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

Угловая приложение и 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

Вы забыли вернуть 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; 
      }) 

Работа codepen