1

У меня есть поле пароля с директивой elementStringthMeter. Я хотел бы, чтобы парольStrengthMeter наблюдал изменения в поле пароля и обновлялся в реальном времени - не только на размытие, либо когда модель поля пароля прошла проверку.Как я могу посмотреть значение ngModel, прежде чем оно будет действительным?

Я использую Угловую проверку в поле пароля, я обнаружил, что моя директива не может наблюдать изменения в поле пароля, пока поле пароля не будет действительным. Я хочу, чтобы проверка пароля оставалась неповрежденной, но мне также нужна индикация силы в реальном времени. Как я могу сделать эту работу? Вот то, что я до сих пор ...

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

ответ

0

кажется, что установка

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

на поле ввода пароля работает вокруг проблемы.

Если у кого есть альтернативное или лучшее решение, не стесняйтесь публиковать сообщения.

+1

[docs] (https://docs.angularjs.org/api/ng/directive/ngModelOptions) для дальнейшего использования. – Blazemonger

Смежные вопросы

 Смежные вопросы