A custom Directive helps us to control the rendering of the HTML inside an AngularJS application. It makes AngularJS responsive.
Here is a custom directive to check for password and confirm password validation:
angular.module('app')
.directive('checkPwd', [function () {
return {
restrict: 'A',
require: 'ngModel',
link: function (scope, elem, attrs, ctrl) {
elem.on('keyup', function () {
scope.$apply(function () {
//get the value of the first password
var p1 = scope.$eval(attrs.ngModel);
//get the value of the second password
var p2 = scope.$eval(attrs.checkPwd);
var v = p1===p2;
scope.pwmatch= v;
});
});
}
};
}]);
In the above code snippet I have made a directive named checkPwd. There is default scope in it. I am storing values in two variables and then comparing their values and setting the result in scope variable pwmatch that is used inside Html.
<html>
<div class="form-group">
<input type="password" class="form-control" placeholder="password" name="password" check-Pwd="user.confirmPassword" ng-model="user.password" ng-minlength="7" required>
<div ng-show="AdminForm.password.$dirty" ng-messages="AdminForm.password.$error">
<div ng-message="required" type="danger" class="text-danger">
Please enter a password.
</div>
<span class="text-warning" ng-show="AdminForm.password.$error.minlength">
Your password should contain atleast 7 characters.
</span>
</div>
</div>
<div class="form-group">
<input type="password" class="form-control" placeholder="confirm password" name="confirmpassword" check-Pwd="user.password" ng-model="user.confirmPassword" required>
<div class="msg-block" ng-show="AdminForm.$error">
<span class="text-warning" ng-show="!AdminForm.confirmpassword.$error.required && !pwmatch && AdminForm.password.$dirty">
Incorrect password.
</span>
</div>
</div>
</html>
This above code shows the use of the directive as an attribute-check-Pwd="user.confirmPassword" & check-Pwd="user.password. And then using !pwmatch for displaying an error message if both the passwords do not match.
This HTML code is just for example,not the complete code. You can customize it according to your need.
0 Comment(s)