Solved

AngularJS Form Validation

Posted on 2015-02-04
5
229 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
  • 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 500 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

Master Your Team's Linux and Cloud Stack!

The average business loses $13.5M per year to ineffective training (per 1,000 employees). Keep ahead of the competition and combine in-person quality with online cost and flexibility by training with Linux Academy.

Question has a verified solution.

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

Introduction Chart.js, used properly, can visually add a difference to your charting applications. It engages your visitors and allows them to interact with data they otherwise wouldn't be able to without expensive and complicated systems. For this…
This article is meant to give a basic understanding of how to use R Sweave as a way to merge LaTeX and R code seamlessly into one presentable document.
Learn the basics of while and for loops in Python.  while loops are used for testing while, or until, a condition is met: The structure of a while loop is as follows:     while <condition>:         do something         repeate: The break statement m…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

831 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