ngModel 값이 유효하기 전에 어떻게 볼 수 있습니까?

Question

암호 필드 옆에 passwordStrengthMeter 요소 지시문이 있습니다. passwordStrengthMeter가 암호 필드의 변경 사항을 관찰하고 실시간으로 업데이트하기를 원합니다. 흐리게 처리하거나 암호 필드의 모델이 유효성 검사를 통과 할 때만 가능합니다.

비밀번호 입력란에 각도 인증을 사용하고 있는데 비밀번호 입력란이 유효해야 내 지시문에서 비밀번호 입력란의 변경 사항을 볼 수 없습니다. 암호 확인이 그대로 유지되기를 원하지만 실시간 강도 표시를 원합니다. 이 작품을 어떻게 만들 수 있습니까? 여기에 ... 내가 지금까지 무엇을 가지고

HTML :

<input class="control" type="password" name="password" placeholder="Password" ng-model="account.password" 
     ng-minlength="8" ng-maxlength="15" ng-pattern="VALIDATION_PATTERNS.passwordStrength" required ng-focused /> 
<password-strength-meter password-field="account.password"></password-strength-meter> 

그리고 지침 :

angular.module('app.directives').directive('passwordStrengthMeter', function() { 
    'use strict'; 

    return { 
     restrict: 'E', 
     replace: true, 
     template: '<div class="password-strength-meter"></div>', 
     link: function(scope, element, attrs) { 
      // Map scores to CSS classes. 
      var scoreClasses = { 
       0: 'blank', 
       1: 'weak', 
       2: 'moderate', 
       3: 'strong', 
       4: 'very-strong' 
      }; 

      var scorer = function() { 
       // Get password value. 
       var password = scope.$eval(attrs.passwordField); 

       // Calculate a score. 
       // TODO Replace this with an actual calculation. 
       return password.length; 
      } 
      scope.$watch(scorer, function(score) { 
       // Remove any score classes for the element. 
       for (var i in scoreClasses) { 
        element.removeClass(scoreClasses[i]); 
       } 

       // Set class based on score. 
       element.addClass(scoreClasses[score]); 
      }); 
     } 
    }; 
}); 

Answer 1

것 같다 그 비밀번호 입력 필드에

ng-model-options="{allowInvalid: true}" 

설정 문제를 해결합니다.

누구든지 대안이나 더 나은 해결책이 있으면 언제든지 게시하십시오. 나중에 참조 할 수 있도록