?
Solved

AngularJS Form Validation

Posted on 2015-02-04
5
Medium Priority
?
240 Views
Last Modified: 2015-02-05
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

0
Comment
Question by:rbhargaw
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
  • 2
5 Comments
 
LVL 25

Expert Comment

by:Kyle Hamilton
ID: 40590963
try with $error.

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

Open in new window

0
 

Author Comment

by:rbhargaw
ID: 40591456
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
 
LVL 25

Accepted Solution

by:
Kyle Hamilton earned 2000 total points
ID: 40591584
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
 

Author Comment

by:rbhargaw
ID: 40591749
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
 
LVL 25

Expert Comment

by:Kyle Hamilton
ID: 40591988
:)
0

Featured Post

Automating Terraform w Jenkins & AWS CodeCommit

How to configure Jenkins and CodeCommit to allow users to easily create and destroy infrastructure using Terraform code.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Originally, this post was published on Monitis Blog, you can check it here . In business circles, we sometimes hear that today is the “age of the customer.” And so it is. Thanks to the enormous advances over the past few years in consumer techno…
In this blog, we’ll look at how improvements to Percona XtraDB Cluster improved IST performance.
Learn the basics of if, else, and elif statements in Python 2.7. Use "if" statements to test a specified condition.: The structure of an if statement is as follows: (CODE) Use "else" statements to allow the execution of an alternative, if the …
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…
Suggested Courses

718 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question