AngularJS Form Validation

I have a angular directive to compare password with confirm password field. That directive works fine but I am unable to hide "Password does not match" error message.The error message goes away once I type the email text field which is a required field and comes after repeat password input. So it seems $invalid is related to form but not to the individual field. How can I relate the error specific to the two textboxes?

<div ng-show="!Enabled" class="form-group">
   <label class="col-md-3 control-label"><strong>Password</strong></label>
   <div class="col-md-6">
      <input type="password" id="updatedata.password" name="updatedata.password" class="form-control input-sm requiredpop" ng-model="updatedata.password" placeholder="Password" required>
   </div>
</div>
<div ng-show="!Enabled" class="form-group">
   <label class="col-md-3 control-label"><strong>Repeat Password</strong></label>
   <div class="col-md-6">
      <input type="password" id="updatedata.newpassword" name="updatedata.newpassword" class="form-control passpop input-sm" ng-model="updatedata.newpassword" password-match="updatedata.password" placeholder="Password" required>
      <p style="color:red" ng-show="!updateForm.updatedata.newpassword.$invalid">Password Does not match</p>
   </div>
</div>
<div class="form-group">
   <label class="col-md-3 control-label"><strong>Email</strong></label>
   <div class="col-md-9">
      <input type="email" ng-model="updatedata.Email" class="control-label requiredpop" placeholder="enter valid email address" required>
   </div>
</div>
appDirectives.directive('passwordMatch', [function () {
    return {
        restrict: 'A',
        scope: true,
        require: 'ngModel',
        link: function (scope, elem, attrs, control) {
            var checker = function () {

                //get the value of the first password
                var e1 = scope.$eval(attrs.ngModel);

                //get the value of the other password  
                var e2 = scope.$eval(attrs.passwordMatch);
                return e1 == e2;
            };
            scope.$watch(checker, function (n) {

                //set the form control to valid if both 
                //passwords are the same, else invalid
                control.$setValidity("unique", n);
            });
        }
    };
}]);

Open in new window

rbhargawFounderAsked:
Who is Participating?

Improve company productivity with a Business Account.Sign Up

x
 
Kyle HamiltonConnect With a Mentor Data ScientistCommented:
Yes. Sorry, I missed that. Having a period in the name like that is totally wrong. In Javascript the period is used for object notation.

You would only need to use an object if you're dealing with child scopes and you need to assign your model to an object of the parent scope - which is actually a pretty common scenario, and.. should be avoided.

If a property name has a period in it (and it shouldn't), you can use bracket notation, like this:

updateForm["updatedata.newpassword"]

glad you got it working :)
0
 
Kyle HamiltonData ScientistCommented:
try with $error.

<p style="color:red" ng-show="!updateForm.updatedata.newpassword.$error.passwordMatch">Password Does not match</p>

Open in new window

0
 
rbhargawFounderAuthor Commented:
Thanks Kyle, somehow it started working once I changed the name to newpassword instead of updatedata.newpassword

I am using the following line now

<span style="color:red" ng-show="updateForm.newpassword.$dirty && updateForm.newpassword.$invalid">Password Does not match</span>
0
 
rbhargawFounderAuthor Commented:
Actually I am dealing with child scope here as this code is inside modal dialog. Just keeping the name without dot but the model with dot..
0
 
Kyle HamiltonData ScientistCommented:
:)
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.