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);
});
}
};
}]);
Who is Participating?
try with $error.
<p style="color:red" ng-show="!updateForm.updatedata.newpassword.$error.passwordMatch">Password Does not match</p>
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.newpas
I am using the following line now
<span style="color:red" ng-show="updateForm.newpas
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..
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.
-
Course of the Month8 days, 8 hours left to enrollMonitoring and Operating a Private Cloud with System Center 2012 R2 273 lessons
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.new
glad you got it working :)