Here is the code I've been working on. I have implemented a custom directive to check if two passwords match. Below is my HTML:
<!-- confirm password -->
<div class="row">
<div class="col-xs-10 col-centered">
<div class="col-md-5 col-xs-12 inputLabels">
<b>Confirm Password:</b>
</div>
<div class="col-md-5 col-xs-12">
<input type="password" name="confirmPassword" ng-model="boardingData.confirmPassword" class="form-control" required compare-to="boardingData.password">
</div>
</div>
</div>
Next, here is the directive that checks if the passwords match:
app.directive('compareTo', function() {
return {
require: "ngModel",
scope: {
otherModelValue: "=compareTo"
},
link: function(scope, element, attributes, ngModel) {
ngModel.$validators.compareTo = function(modelValue) {
return modelValue == scope.otherModelValue;
};
scope.$watch("otherModelValue", function() {
ngModel.$validate();
});
}
};
Lastly, here is the CSS used for styling:
input:valid {box-shadow: 0 0 3px rgb(97, 240, 59);}