The following example will work to verify the
confirm password using compareTo directive.
Example: HTML
Code -
<form class="form-horizontal" role="form" name="CreateEmployeeForm" novalidate>
<div class="col-sm-6
col-sm-offset-3">
<div class="row">
<div class="form-group">
<div class="col-sm-12">
<span class="smoothy">Password</span>
<input type="password" class="form-control placeholder" name="Password" ng-model="Employee.Password" ng-required="true" placeholder="Password">
</div>
</div>
<div class="form-group">
<div class="col-sm-12">
<span class="smoothy">Confirm
Password</span>
<input type="password" class="form-control placeholder" name="ConfirmPassword" ng-model="Employee.ConfirmPassword" ng-required="true" compare-to="Employee.Password" placeholder="Confirm
Password">
<div ng-messages="CreateEmployeeForm.ConfirmPassword.$error" ng-if="CreateEmployeeForm.ConfirmPassword.$touched">
<span ng-message="compareTo">Password not matched.</span>
</div>
</div>
</div>
</div>
</div>
</form>
AngularJs
directive Code –
var
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();
});
}
};
};
app.directive("compareTo", compareTo);
AngularJs
Controller Code –
var
app = angular.module("app", []);
app.controller("confirmCtrl",
function ($scope) {
$scope.Employee = {
password: "",
confirmPassword: ""
};
});