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
Solved

AngularJS Form Validation

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

Webinar: Aligning, Automating, Winning

Join Dan Russo, Senior Manager of Operations Intelligence, for an in-depth discussion on how Dealertrack, leading provider of integrated digital solutions for the automotive industry, transformed their DevOps processes to increase collaboration and move with greater velocity.

Question has a verified solution.

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

In this article you'll learn how to use Ajax calls within your CodeIgniter application. To explain this, I'll illustrate how to implement a simple contact form to allow visitors to send you an email through your web site.
Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
Learn the basics of strings in Python: declaration, operations, indices, and slicing. Strings are declared with quotations; for example: s = "string": Strings are immutable.: Strings may be concatenated or multiplied using the addition and multiplic…
Learn the basics of lists in Python. Lists, as their name suggests, are a means for ordering and storing values. : Lists are declared using brackets; for example: t = [1, 2, 3]: Lists may contain a mix of data types; for example: t = ['string', 1, T…

789 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