How to do reverse password validation in AngularJs

Question

I'm trying to do password validation in AngularJs.

HTML

<input type="password" id="inputPassword1"   name="Password" class="form-control" data-ng-model="passwordd"  ng-pattern="/^[A-Za-z0-9_+@&$#!^%*-]{6,10}$/"  placeholder="Password" required />
<span ng-show="myForm.Password.$error.pattern"><span style="color:red">Must contain minimum 6 characters</span></span>

<input type="password" id="inputPassword" class="form-control" ng-change="doPwdMatch()" name="password" data-ng-model="password2"  placeholder="Confirm Password" required />
<span ng-show="pwdDonotMatch"> <span style="color:red">Passwords don't match.</span> </span>

JS

$scope.doPwdMatch=function(){

            if(($scope.password2!=="" || $scope.password2==undefined ) && $scope.passwordd !== $scope.password2){
                    $scope.pwdDonotMatch = true;
            }else
                    $scope.pwdDonotMatch = false;
            }

It showing error if the confirm password does not match with password. But it is not validating if I clear the password field and input some other value. To be specific, reverse checking is not happening.

You might want to put the same `ng-change` on password1 – Icycool Oct 29 '15 at 07:28 — Icycool, Oct 29 '15 at 07:28
http://stackoverflow.com/a/14012512/5246 – sirrocco Oct 29 '15 at 07:30 — sirrocco, Oct 29 '15 at 07:30

Abhilash Augustine · Answer 1 · 2015-10-29T08:33:47.387

You can simply add ng-change="doPwdMatch()" in your password tag to do this,

<input type="password" id="inputPassword1"   name="Password" class="form-control" data-ng-model="passwordd" ng-change="doPwdMatch()"  ng-pattern="/^[A-Za-z0-9_+@&$#!^%*-]{6,10}$/"  placeholder="Password" required />
<span ng-show="myForm.Password.$error.pattern"><span style="color:red">Must contain minimum 6 characters</span></span>

<input type="password" id="inputPassword" class="form-control" ng-change="doPwdMatch()" name="password" data-ng-model="password2"  placeholder="Confirm Password" required />
<span ng-show="pwdDonotMatch"> <span style="color:red">Passwords don't match.</span> </span>

Edit

You can add this logic inside your function pwdDonotMatch(). That is you can check whether the model for password2 has any value or not.

$scope.doPwdMatch = function () {
    if ($scope.password2 == "" || $scope.passwordd == "") {
        // If any one field is null, then do not display error message
        $scope.pwdDonotMatch = true;
    }
    else if (($scope.password2 !== "" || $scope.password2 == undefined) && $scope.passwordd !== $scope.password2) {
        $scope.pwdDonotMatch = true;
    } else
        $scope.pwdDonotMatch = false;
}

Problem with adding ng-change="doPwdMatch()" in password tag is, when I type in password field it will validate before entering something in the confirm password field. It should wait for something to be entered in the confirm password field — Protagonist, Oct 29 '15 at 08:15
The problem is if the confirm password field is empty, the error message should not be shown. I t should show only if the passwords dont match — Protagonist, Oct 29 '15 at 08:50

score 0 · Answer 2 · answered Oct 29 '15 at 07:39

Why do you need to call a ng-change?

With ng-model, your scope is always the current input value, so you can just do it via an ng-if="password1 !== password2"

So for example:

<div ng-app ng-controller="PasswordCtrl">

    <input type="password" id="inputPassword1"   name="Password" class="form-control" ng-model="password" placeholder="Password" required />

    <span ng-show="myForm.Password.$error.pattern"><span style="color:red">Must contain minimum 6 characters</span></span>

    <input type="password" id="inputPassword" class="form-control"name="password" ng-model="reenter_password"  placeholder="Confirm Password" required />

    <span ng-if="password !== reenter_password"> 
        <span style="color:red">Passwords don't match.</span> 
    </span>
</div>

And your Controller is simply this:

function PasswordCtrl($scope) {
    $scope.password = "";
    $scope.reenter_password = "";
}

See this jsfiddle example I've created out of your code.

How to do reverse password validation in AngularJs

2 Answers2