How to check for confirm password in the signup page using angularjs

Question

I'm trying to write code for checking confirm password using angularjs.Can anyone please help me out regarding this issue ...

My signUp.html:

<html ng-app="Sample">
<head>
<link rel="stylesheet" href="../css/bootstrap.min.css" />
<link rel="stylesheet" href="../css/custom.css" />
<script src="../js/jquery.min.js"></script>
<script src="../js/bootstrap.min.js"></script>
<script src="../js/angular.min.js"></script>
<script src="../js/angular-animate.min.js"></script>
<script src="../js/angular-route.min.js"></script>
<script src="../js/script.js"></script>
<script src="https://code.angularjs.org/1.3.0-rc.2/angular-messages.js"></script>

</head>
<body>
    <div class="container" id="wrapper1" align="center" ng-controller="RegistrationController as registration" >
        <div>
            <img id="logoDiv" src="../images/favicon.png">
        </div>
        <div id="loginDiv">
            <h2>Sign up</h2>

            <form>
                <input type="text" class="resizedTextbox" ng-model="email" placeholder="Email" /><br> <br>
                <input type="text" class="resizedTextbox" placeholder="Password" /><br><br> 
                 <input type="text" class="resizedTextbox" placeholder="Verify Password" /><br><br> 
               <a href="#/signUp"> <button class="resizedBtn" value="SIGN UP">SignUp
                </button></a>
            </form>
        </div>
    </div>

    </body>
    </html>

Possible duplicate of [password-check directive in angularjs](http://stackoverflow.com/questions/14012239/password-check-directive-in-angularjs) — wogsland, Jan 20 '16 at 06:24

score 0 · Answer 1 · answered Jan 20 '16 at 06:41

You can assign a ng-model to both password fields , and below the text fields use an ng-show with condition that if both password match then show success message

    <form>
                <input type="text" class="resizedTextbox" ng-model="email" placeholder="Email" /><br> <br>
                <input type="text" class="resizedTextbox" ng-model="password" placeholder="Password" /><br><br> 
                 <input type="text" class="resizedTextbox" ng-model="verify-password" placeholder="Verify Password" /><br><br> 
<div ng-show="password === verify-password" > password matched </div>
               <a href="#/signUp"> <button class="resizedBtn" value="SIGN UP">SignUp
                </button></a>
            </form>

similarly you can use ng-hide to show error message

Abhay · Answer 2 · 2016-01-20T06:58:20.103

Use like this by using custom directive "verifyPassword" & use form_name.password2.$error.noMatch property in ng-show, to display the error:

 <input type="password" name="password" class="form-control" placeholder="Enter password"/>   // password html
 <input verifyPassword type="text"  name="password2" class="resizedTextbox" placeholder="Verify Password"/>  //confirm password html

And use this directive,

Buyer.directive('verifyPassword', function () {
  return {
    require: 'ngModel',
    link: function (scope, elm, attrs, ctrl) {
        ctrl.$parsers.unshift(function (viewValue, $scope) {

            var noMatch = viewValue != scope.regForm.password.$viewValue

            ctrl.$setValidity('noMatch', !noMatch)
           return (noMatch)?noMatch:viewValue;

        })
    }
}

});

score 0 · Accepted Answer · edited May 23 '17 at 12:15

I've had the same question as you, and found a great answer here. I used the 'nxEqual' directive and my form inputs look like this:

<input type="password" name="password" ng-model="user.password" placeholder="Password"
           ng-required="true"
           ng-minlength="8">

<input type="password" name="passwordConfirm" ng-model="user.passwordConfirm" placeholder="Confirm Password"
           ng-required="true"
           ng-minlength="8"
           nx-equal="user.password">

To display a message like "Passwords do not match", i used this line ("signUpForm" is the name of myform.):

<div ng-show="signUpForm.passwordConfirm.$error.nxEqual"> Passwords do not match.</div >

How to check for confirm password in the signup page using angularjs

3 Answers3