AngularJS password confirmation noMatch not working?

Question

I have this script here:

angular.module('UserValidation', []).directive('validPasswordC', function () {
    return {
        require: 'ngModel',
        link: function (scope, elm, attrs, ctrl) {
            ctrl.$parsers.unshift(function (viewValue, $scope) {
                var noMatch = viewValue != scope.signupForm.password.$viewValue
                ctrl.$setValidity('noMatch', !noMatch)
            })
        }
    }
});

And here's the html:

<div class="fieldset" ng-class="{'has-error':formData.password.$invalid && !formData.password.$pristine}">
   <label>Password</label>
   <input type="password" id="password" name="password" ng-model="formData.password" ng-minlength="8" ng-maxlength="20" ng-pattern="/(?=.*[a-z])(?=.*[A-Z])(?=.*[^a-zA-Z])/" placeholder="password" required />

   <p ng-show="signupForm.password.$error.required" class="error">*</p>
   <p ng-show="signupForm.password.$error.minlength" class="error">
      Passwords must be between 8 and 20 characters.</p>
   <p ng-show="signupForm.password.$error.pattern" class="error">
      Must contain one lower &amp; uppercase letter, and one non-alpha character (a number or a symbol.)</p>
</div>

<div class="fieldset" ng-class="{'has-error':formData.password_c.$invalid && !formData.password_c.$pristine}">
   <label for="password_c">Confirm Password</label>
   <input type="password" id="password_c" name="password_c" ng-model="formData.password_c" placeholder="confirm password" valid-password-c required />

   <p ng-show="signupForm.password_c.$error.noMatch" class="error">Passwords do not match.</span>
   <p ng-show="signupForm.password_c.$error.required" class="error">*</p>
</div>

The character validation for password is working, but the "noMatch" function for confirm password is not working.

What might be the problem? Thanks! :)

Rastislav · Accepted Answer · 2016-04-28 14:52:01Z

17

You need to pass your original password to directive as well/

Please see working demo below

var app = angular.module('app', []);
app.directive('validPasswordC', function() {
  return {
    require: 'ngModel',
    scope: {

      reference: '=validPasswordC'

    },
    link: function(scope, elm, attrs, ctrl) {
      ctrl.$parsers.unshift(function(viewValue, $scope) {

        var noMatch = viewValue != scope.reference
        ctrl.$setValidity('noMatch', !noMatch);
        return (noMatch)?noMatch:!noMatch;
      });

      scope.$watch("reference", function(value) {;
        ctrl.$setValidity('noMatch', value === ctrl.$viewValue);

      });
    }
  }
});
app.controller('homeCtrl', function($scope) {




});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app">
  <div ng-controller="homeCtrl">
    <p>Password:{{formData.password}}</p>
    <form name="signupForm">
      <div class="fieldset" ng-class="{'has-error':formData.password.$invalid && !formData.password.$pristine}">
        <label>Password</label>
        <input type="password" id="password" name="password" ng-model="formData.password" ng-minlength="8" ng-maxlength="20" ng-pattern="/(?=.*[a-z])(?=.*[A-Z])(?=.*[^a-zA-Z])/" placeholder="password" required />

        <p ng-show="signupForm.password.$error.required" class="error">*</p>
        <p ng-show="signupForm.password.$error.minlength" class="error">
          Passwords must be between 8 and 20 characters.</p>
        <p ng-show="signupForm.password.$error.pattern" class="error">
          Must contain one lower &amp; uppercase letter, and one non-alpha character (a number or a symbol.)</p>
      </div>

      <div class="fieldset" ng-class="{'has-error':formData.password_c.$invalid && !formData.password_c.$pristine}">
        <label for="password_c">Confirm Password</label>
        <input type="password" id="password_c" name="password_c" ng-model="formData.password_c" placeholder="confirm password" valid-password-c="formData.password" required />

        <p ng-show="signupForm.password_c.$error.noMatch" class="error">Passwords do not match.</span>
          <p ng-show="signupForm.password_c.$error.required" class="error">*</p>
      </div>
    </form>
  </div>
</div>

edited Apr 28, 2016 at 14:52

Rastislav

535 bronze badges

answered Nov 10, 2014 at 11:30

sylwester

16.5k1 gold badge27 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

null Over a year ago

This also makes it more reusable.

Deepak saini Over a year ago

using this snippet, Every validation is going very well but I am not able to submit my form. Can you have a idea to resolve this?

sylwester Over a year ago

@Deepaksaini can you please provide code sample ? otherwise is difficult to advise

A_J Over a year ago

@Deepaksaini, try updated code now"return (noMatch)?noMatch:undefined;" was missing;

nuander Over a year ago

works great, tho I had to use this line var noMatch = viewValue != scope.reference.$viewValue

Prime_Coder · Accepted Answer · 2016-01-13 05:57:17Z

12

The easiest is this one.But i don't know this is the good way of coding.

<input ng-model="password" name="user_password" type="password" ng-required="true"  >
<input ng-model="confirmPassword" name="user_password" type="password" ng-required="true"  >
<span ng-show="pasword !== confirmPassword">Password mismatch</span>

edited Jan 13, 2016 at 5:57

Prime_Coder

1612 silver badges14 bronze badges

answered Dec 16, 2015 at 7:05

santhosh

2,0083 gold badges25 silver badges36 bronze badges

3 Comments

Govind Jha Over a year ago

your answer is working good. but one problem is there, how can i make disable my submit button if password did not match.

Kirk B. Over a year ago

@GovindJha: try ng-disabled="password === confirmPassword" docs.angularjs.org/api/ng/directive/ngDisabled

santhosh Over a year ago

@KirkB. it should be something like ng-disabled="password !== confirmPassword"

jinson · Accepted Answer · 2015-09-09 06:37:26Z

0

The following also will work to verify the confirm password.

<div ng-app="myapp"  ng-controller="mainController as mnCtrl">
<form name="mnCtrl.useradd" ng-submit="mnCtrl.frmAdd()" novalidate  role="form">

<input ng-model="mnCtrl.fields.password" name="user_password" type="password" ng-required="true"  >

<input ng-model="mnCtrl.fields.cpassword"   name="user_cpassword" type="password" ng-required="true"  > 

<div ng-show=" mnCtrl.useradd.user_cpassword.$viewValue != '' && (mnCtrl.useradd.user_password.$viewValue != mnCtrl.useradd.user_cpassword.$viewValue)      ">Fields do not match!</div>

</form>
</div>

answered Sep 9, 2015 at 6:37

jinson

4315 silver badges10 bronze badges

Collectives™ on Stack Overflow

AngularJS password confirmation noMatch not working?

3 Answers 3

Please see working demo below

5 Comments

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Please see working demo below

5 Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related