AngularJS Password Strength Validation

Question

I was wondering if you would be able to help me out. I am trying to get validation to work for a password field. The password must comply to certain criteria to be valid and once each criteria is met it is checked off on the fly.

To do this I created 3 hidden fields each of which copies the value from the password field and validates it against one of the 3 criteria it requires. Ie one of the criteria requires the user to input a number, once they do this the text stating a number is required turns green. Same thing happens for the other two hidden fields. these hidden fields can be seen below:

         <!--7-25 characters -->
         <input  required ng-model="password"  ng-pattern="/.{7,25}/"  name="length" type="text"  />
        <!--Contain at least 1 letter -->
         <input  required ng-model="password"  ng-pattern="/[a-zA-Z]+/" name="letter" type="text"  />
        <!--Contain at least 1 number -->
         <input  required ng-model="password"  ng-pattern="/[0-9]+/"  name="number" type="text"  />

For the actual password field I then wanted to create a directory which would only set that field as valid if the three hidden fields are also valid.
My directory looks like this (my form is named registration and to begin with im only testing it against the length hidden field):

app.directive('validPwd', function() {
  return {
        restrict: 'A', 
        require: '?ngModel', 
        link: function(scope, elem, attrs, ngModel) {
          if(!ngModel) return; 


          scope.$watch(attrs.ngModel, function() {
            validate();
          });

          var validate = function() {


            // set validity
            ngModel.$setValidity('validPwd', registration.length.$valid);
          };
        }
      }
    });

My issue with this is that my directive is giving me the error that it cannot read property length of undefined. Am I not referring to it correctly or what? I cant seem to figure it out.

Any help would be greatly appreciated.

Answer 1

That's a very convoluted way to validate your field. You shouldn't pollute your view with 3 hidden fields just to validate a 4th one. Why don't you simply check each condition inside a custom validator, as explained in the documentation ?

app.directive('validPwd', function() {
  return {
    require: 'ngModel',
    link: function(scope, elm, attrs, ctrl) {
      ctrl.$parsers.unshift(function(viewValue) {
        var containsLetter = containsLetter(viewValue);
        var containsDigit = containsDigit(viewValue);
        var hasCorrectLength = hasCorrectLength(viewValue);

        ctrl.$setValidity('containsLetter', containsLetter);
        ctrl.$setValidity('containsDigit', containsDigit);
        ctrl.$setValidity('hasCorrectLength', hasCorrectLength);

        if (containsLetter && containsDigit && hasCorrectLength) {
          return viewValue;
        } 
        else {
          return undefined;
        }
      });
    }
  };
});