Password Match with Angular.js

Question

I try to create a form with validation. I am very new at angular.js. I copied some code from samples but I couldn't make it work.

Here is my html and script:

<body ng-app="myApp">
    <script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>  
    <h2>Validation Example</h2>
    <form name="myForm" novalidate>
        <p>Username:<br>
        <input type="text" name="user" ng-model="user" required>
        <span style="color:red" ng-show="myForm.user.$dirty && myForm.user.$invalid">
            <span ng-show="myForm.user.$error.required">Username is required.</span>
        </span>
        </p>

        <p>Email:<br>
        <input type="email" name="email" ng-model="email" required>
        <span style="color:red" ng-show="myForm.email.$dirty && myForm.email.$invalid">
            <span ng-show="myForm.email.$error.required">Email is required.</span>
            <span ng-show="myForm.email.$error.email">Invalid email address.</span>
        </span>
        </p>

        <label for="password"> Password</label> 
        <input type="password" name="password" ng-model="password" placeholder="New Password"/>  
        <label for="confirmPassword">Confirm Password</label> 
        <input type="password" name="confirmPassword" placeholder="Confirm Password" ng-model="confirmPassword" pw-check="password"/>
        <span class="error" ng-show="myForm.password.$error.pwmatch"> Passwords don't match. </span>
        <p>
        <input type="submit" ng-disabled="myForm.user.$dirty && myForm.user.$invalid || myForm.email.$dirty && myForm.email.$invalid">
        </p>
    </form>

    <script>
    var app = angular.module('myApp', []);

    app.directive('pwCheck', function () {
        return {
            require: 'ngModel',
            link: function (scope, elem, attrs, ctrl) {
                scope.$watch(attrs.pwCheck, function (confirmPassword) {
                    var isValid = ctrl.$viewValue === confirmPassword;
                    ctrl.$setValidity('pwmatch', isValid);
                });
            }
        }
    });
    </script>
</body>

Can anyone tell me what is wrong with this ?

What do you expect to happen, and what is happening instead? — Gabriel Hautclocq
– Gabriel Hautclocq, Commented May 15, 2015 at 9:52
If passwords don't match, it should show error "Passwords don't match." — GaripTipici
– GaripTipici, Commented May 15, 2015 at 9:59
You took your example from w3schools.com/angular/angular_validation.asp That example works. Just modify it step by step so that it still works for you. — Gabriel Hautclocq
– Gabriel Hautclocq, Commented May 15, 2015 at 10:00
I tried and didn't success to make it work. Can you tell me what is wrong and why it is wrong ? — GaripTipici
– GaripTipici, Commented May 15, 2015 at 10:03

Agnislav · Accepted Answer · 2015-05-15 11:03:06Z

1

From what I know about this directive, @dcodesmith's solution is mostly correct. Try this one:

<input type="password" name="confirmPassword" placeholder="Confirm Password" ng-model="confirmPassword" pw-check="password"/>

UPDATE. Sorry for previous snippet. Check this out. This works:

<input type="password" name="password" ng-model="password" placeholder="New Password"  pw-check="confirmPassword"/>

<input type="password" name="confirmPassword" placeholder="Confirm Password" ng-model="confirmPassword"/>

JS

link: function (scope, elem, attrs, ctrl) {
  scope.$watch(attrs.pwCheck, function (password) {
    var isValid = ctrl.$viewValue === password;
    ctrl.$setValidity('pwmatch', isValid);
  });
}

JSBin: http://jsbin.com/rakivadibi/1/edit?html,js,output

edited May 15, 2015 at 11:03

answered May 15, 2015 at 10:10

Agnislav

4192 silver badges10 bronze badges

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

Collectives™ on Stack Overflow

Password Match with Angular.js

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related