In this post i describe how to compare password using angularjs.
I
will show you how to match password and confirm password in
angularJs using directive. we will create custom angularjs directive for
confirm password validation.
Let see how to implement Example:-
Html:-
<!DOCTYPE html>
<html ng-app="app">
<head>
<title>
Confirm Password
Validation in AngularJS
</title>
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.css"
/>
<script
src="https://code.angularjs.org/1.3.0-rc.2/angular.js"></script>
<style>
.ng-invalid {
border-color: red;
outline-color: red;
}
.ng-valid {
border-color: green;
outline-color: green;
}
</style>
</head>
<body
ng-controller="confirmCtrl">
<form>
<lable></lable>
<div>
<label>Password</label>
<input type="password" name="pwd"
ng-model="user.password" required=""
class="form-control" />
</div>
<div>
<label>Confirm Password</label>
<input type="password" name="confirmPassword"
ng-model="user.confirmPassword" required=""
compare-to="user.password" class="form-control" />
</div>
</form>
</body>
</html>
Script:-
<script>
var app =
angular.module("app", []);
app.controller("confirmCtrl",
function($scope) {
$scope.user = {
password: "",
confirmPassword: ""
};
});
app.directive("compareTo", function() {
return {
require: "ngModel",
scope: {
confirmPassword: "=compareTo"
},
link: function(scope, element, attributes, modelVal) {
modelVal.$validators.compareTo = function(val) {
return val == scope.confirmPassword;
};
scope.$watch("confirmPassword", function() {
modelVal.$validate();
});
}
};
});
</script>
Hope you like the post . Please
share and comment the queries below or customer care section.
Thanks,
Thanks,
0 Comments