update ng-invalid when editing double entry fields - css

Question

i have a password and password confirm field, which is connected using a directive. beside that i have css that set border color when ng-invalid. the issue is that when i for instance enter the confirm_password first and then same in password it does not remove the 'ng-invalid'. is there a way to tell angular to update other fields classes when editing password?
html
<div class="form-group">
<label>Adgangskode</label>
<input type="password" class="form-control" name="password"
ng-model="vm.password" ng-minlength="6" ng-maxlength="24"
placeholder="Din adgangskode"
equals="vm.confirm_password" required>
<p ng-show="SignUp.password.$invalid
&& (SignUp.password.$dirty || vm.submitted)"
class="help-block ng-binding" style="">Adgangskode er invalid.</p>
</div>
<div class="form-group">
<label>Adgangskode bekræftelse</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="Bekræft din adgangskode"
required nx-equal="vm.password">
<p ng-show="SignUp.confirm_password.$error.nxEqual
&& (SignUp.confirm_password.$dirty || vm.submitted)"
class="help-block ng-binding">Adgangskoderne er ikke ens.</p>
</div>
css
input.ng-dirty.ng-invalid {
border-color: #a94442;
}
.ng-submitted input.ng-invalid {
border-color: #a94442;
}
directive funciton
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;
});
}
}
}

Answer 1

Have the compare directive watch the other field:
app.directve("compareTo", compareTo);
function compareTo() {
return {
require: "ngModel",
link: function(scope, elem, attrs, ngModel) {
ngModel.$validators.compareTo = function(modelValue) {
return modelValue == scope.$eval(attrs.compareTo);
};
scope.$watch(attrs.compareTo, function() {
ngModel.$validate();
});
}
};
}
Usage:
<form name="form1">
<input type="password" name="password" required
ng-model="user.password" />
<input type="password" name="confirmPassword" required
ng-model="user.confirmPassword" compare-to="user.password" />
</form>
<div ng-show="form1.comfirmPassword.$error.compareTo">
Error: Password entries must match
</div>
Think carefully about double entry
Double entry:
increases the workload for every single user;
can be bypassed by copying and pasting, or automatic form-filling tools;
only ensures the two fields match, not that they contain the valid information;
and
may be seen as belittling the user;
Alternatives to double entry are worth serious consideration. These alternatives include authentication and/or simple methods of reset or recovery.
— Formulate Information Design Blog - Double entry of form fields