Password match angularjs validation

Question

Attempting to match passwords using a custom directive in angular js. I can't get it to work, although I have looked at several google tutorials. I have created a Plunker that shows it not working at plunker .

HTML:

    <div class="form-group" ng-class="{ 'has-error': form.password.$invalid && !form.username.$pristine }">
        <label for="password">Password</label>
        <input type="password" name="password" id="password" class="form-control" ng-model="user.password" required ng-minlength="6" ng-maxlength="12"/>
    </div>
    <div class="form-group" ng-class="{ 'has-error': form.confirm-password.$invalid && !form.confirm-password.$pristine }">
        <label for="confirm-password">Confirm Password</label>
        <input type="password" name="confirm-password" id="confirm-password" class="form-control" ng-model="user.confirmpwd" required equal="{{user.password}}"/>
        <span ng-show="user.confirmpwd.$error.equal" class="help-block">Password does not match above</span>
    </div>

JAVASCRIPT:

app.directive('equal', [
function() {

var link = function($scope, $element, $attrs, ctrl) {

  var validate = function(viewValue) {
    var comparisonModel = $attrs.equal;
      console.log(viewValue + ':' + comparisonModel);

    if(!viewValue || !comparisonModel){
      // It's valid because we have nothing to compare against
      ctrl.$setValidity('equal', true);
    }

    // It's valid if model is lower than the model we're comparing against
    ctrl.$setValidity('equal', viewValue === comparisonModel );
    return viewValue;
  };

  ctrl.$parsers.unshift(validate);
  ctrl.$formatters.push(validate);

  $attrs.$observe('equal', function(comparisonModel){
        return validate(ctrl.$viewValue);
  });

};

return {
  require: 'ngModel',
  link: link
};
}]);

The problem seems to be around the custom directive, it doesnt seem to be binding to the ngModel item properly? I feel like I must be missing something simple, I am just starting to learn AngularJS.

Answer 1

The password field binding should work, but you are validating that the password field should be at least 6 characters long, meaning it will be bound to model only after you enter 6 or more characters. Until then it will be undefined , which is what you are getting in the console.log statement I assume.

However there is other problem. The error message will not be shown, because your field name is confirm-password . You should name it confirmPassword or something without dashes. The name is used by Angular as an object property and JavaScript object key can not contain dashes.

So the password confirm part of your form should look something like this:

<div class="form-group" ng-class="{ 'has-error': form.confirmPassword.$invalid && !form.confirmPassword.$pristine }">
    <label for="confirm-password">Confirm Password</label>
    <input type="password" name="confirmPassword" id="confirm-password" class="form-control" ng-model="user.confirmpwd" required equal="{{user.password}}"/>
    <span ng-show="form.confirmPassword.$error.equal" class="help-block">Password does not match above</span>
</div>