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

wogsland
– wogsland

2016-01-20 06:24:19 +00:00
Commented Jan 20, 2016 at 6:24 — wogsland
– wogsland, Commented Jan 20, 2016 at 6:24

Community · Accepted Answer · 2017-05-23 12:15:18Z

0

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 >

edited May 23, 2017 at 12:15

CommunityBot

11 silver badge

answered Jan 20, 2016 at 8:32

hkr3

486 bronze badges

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

Comments

Rishabh Jain · Accepted Answer · 2016-01-20 06:41:02Z

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 · Accepted Answer · 2016-01-20 06:58:20Z

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;

        })
    }
}

});

Collectives™ on Stack Overflow

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

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related