Solved

AngularJS Form Validation

Posted on 2015-02-04
5
227 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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Suggested Solutions

PROBLEM: The other day I was working on adding an ajax request to a webpage that already had a dialog box on the page.  The dialog box was using relative positioning to be positioned next to a form field I had on the page.  Everything was working…
Introduction Knockoutjs (Knockout) is a JavaScript framework (Model View ViewModel or MVVM framework).   The main ideology behind Knockout is to control from JavaScript how a page looks whilst creating an engaging user experience in the least …
The viewer will learn how to count occurrences of each item in an array.
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.

911 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

Need Help in Real-Time?

Connect with top rated Experts

18 Experts available now in Live!

Get 1:1 Help Now