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 입력에 대한 적절한 양방향 유효성 검사를 제공하지만,해야 does not (비디오에서 작동한다, 나는 혼란 스럽다). 그것은 password_confirm의 값을 변경할 때 유효하지만, password을 변경하면 유효성 검사가 작동하지 않습니다. 여기 plunker 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의 이전 버전에서 sthat을보고, $ parsers 파이프 라인을 다시 트리거했으며, 현재 버전에서는보기 값을 이미 가지고있는 것과 동일한 값으로 설정 했으므로 아무 것도하지 않도록 최적화되었습니다.

이것은 실제로 나에게 해킹처럼 보입니다. https://docs.angularjs.org/api/ng/type/ngModel.NgModelController : 각 지금 일을 더 쉽게 만들고 파서와 포매터를 처리하도록 강요하지 않는 검증에 대한 지원을하고있다, BTW (안 테스트)

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

같은 것을 교체해야합니다.