Проверка пароля AngularJS

Question

Я изучаю учебное пособие «Создание приложений с помощью проверки углов, узлов и токенов». И я застрял. Я нашел этот код там:

HTML

<form name="register" class="form-signin" novalidate> 
    <h1 class="form-signin-heading text-muted">Register</h1> 
    <input type="email" ng-model="email" name="email" class="form-control" placeholder="Email address" required autofocus> 
    <p class="help-block" ng-show="register.email.$dirty && register.email.$invalid">Please enter a proper email.</p> 
    <input type="password" name="password" ng-model="password" class="form-control" placeholder="Password" required> 
    <input type="password" name="password_confirm" ng-model="password_confirm" class="form-control" placeholder="Confirm Password" validate-equals="password"> 
    <p class="help-block" ng-show="register.password_confirm.$invalid && register.password_confirm.$dirty">please match the passwords.</p> 
    <button ng-disabled="register.$invalid" class="btn btn-lg btn-primary btn-block" type="submit"> 
     Submit 
    </button> 
</form> 

и JS

angular.module('myApp', []).directive('validateEquals', function() { 
      return { 
       require: 'ngModel', 
       link: function (scope, element, attrs, ngModelCtrl) { 
        function validateEqual(value) { 
         var valid = (value === scope.$eval(attrs.validateEquals)); 
         ngModelCtrl.$setValidity('equal', valid); 
         return valid ? value : undefined; 
        } 
        ngModelCtrl.$parsers.push(validateEqual); 
        ngModelCtrl.$formatters.push(validateEqual); 
        scope.$watch(attrs.validateEquals, function() { 
         ngModelCtrl.$setViewValue(ngModelCtrl.$viewValue); 
        }); 

       } 
      }; 
     }); 

этой директива в соответствии с видео должна дать мне правильные двухсторонние проверки для password и password_confirm входов, но (на видео он работает, я запутался). Он хорошо проверяет, когда я меняю значение password_confirm, но когда я меняю password, проверка не работает. Вот плункер plunker. Вопрос: Что не так с этим кодом? И как мне это исправить?

Answer 1

Решение найдено, благодаря JB Nizet :)

решение:

angular.module('learningAngularApp') 
     .directive('validateEquals', 
       function() { 
        return { 
         require: 'ngModel', 
         link: function (scope, element, attrs, ngModelCtrl) { 
          ngModelCtrl.$validators.validateEqual = function(modelValue, viewValue) { 
           var value = modelValue || viewValue; 
           var valid = (value === scope.$eval(attrs.validateEquals)); 
           return valid; 
          } 
          scope.$watch(attrs.validateEquals, function() { 
           ngModelCtrl.$validate(); 
          }); 

         } 
        }; 
       }); 

Answer 2

Проблема, вероятно, в этой строке:

ngModelCtrl.$setViewValue(ngModelCtrl.$viewValue); 

Эта линия не делает ничего. Я рассматриваю предыдущую версию Angular, она перезапустила конвейер $ parsers, и что в текущей версии, поскольку он устанавливает значение представления на то же самое значение, которое у него уже есть, он был оптимизирован, чтобы ничего не делать.

Это действительно выглядит как взломать меня. Оно должно быть заменено чем-то вроде

scope.$watch(attrs.validateEquals, function(firstPassword) { 
    var valid = (ngModelCtrl.$modelValue === firstPassword); 
    ngModelCtrl.$setValidity('equal', valid); 
}); 

(не тестировался)

BTW, угловой теперь поддерживают валидатор, которые делают вещи проще и не заставляют вас иметь дело с анализаторами и форматтерами: https://docs.angularjs.org/api/ng/type/ngModel.NgModelController.