rbhargaw
asked on
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);
});
}
};
}]);
ASKER
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 sword.$dir ty && updateForm.newpassword.$in valid">Pas sword Does not match</span>
I am using the following line now
<span style="color:red" ng-show="updateForm.newpas
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
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..
:)
Open in new window