I am facing an issue with a password and password confirmation field that are linked using a directive. Additionally, I have CSS that sets the border color when ng-invalid. The problem arises when I enter the password in the confirm_password first and then the same password in the password, it does not remove the 'ng-invalid' class. Is there a way to instruct Angular to update the classes of other fields when editing the password?
HTML
<div class="form-group">
<label>Password</label>
<input type="password" class="form-control" name="password"
ng-model="vm.password" ng-minlength="6" ng-maxlength="24"
placeholder="Your password"
equals="vm.confirm_password" required>
<p ng-show="SignUp.password.$invalid
&& (SignUp.password.$dirty || vm.submitted)"
class="help-block ng-binding" style="">Password is invalid.</p>
</div>
<div class="form-group">
<label>Confirm Password</label>
<input type="password" class="form-control" name="confirm_password"
ng-model="vm.confirm_password"
ng-minlength="6" ng-maxlength="24"
ng-model="vm.confirm_password"
placeholder="Confirm your password"
required nx-equal="vm.password">
<p ng-show="SignUp.confirm_password.$error.nxEqual
&& (SignUp.confirm_password.$dirty || vm.submitted)"
class="help-block ng-binding">Passwords do not match.</p>
</div>
CSS
input.ng-dirty.ng-invalid {
border-color: #a94442;
}
.ng-submitted input.ng-invalid {
border-color: #a94442;
}
Directive Function
function ComparePassword() {
return {
require: 'ngModel',
link: function (scope, elem, attrs, model) {
if (!attrs.nxEqual) {
console.error('nxEqual expects a model as an argument!');
return;
}
scope.$watch(attrs.nxEqual, function (value) {
model.$setValidity('nxEqual', value === model.$viewValue);
});
model.$parsers.push(function (value) {
var isValid = value === scope.$eval(attrs.nxEqual);
model.$setValidity('nxEqual', isValid);
return isValid ? value : undefined;
});
}
}
}