How to make Password field visible to user in Angular JS? – User friendly Tech help
From long back we were planning to share our knowledge on the emerging technologies in the world. To quench your thirst we are launching our first post on Angular JS pragmatic scenarios.Hope your feedback and suggestions will motivate us to share more with the technology lovers.
n
Requirement:- How a user can check the password entered in the text-box and rectify it in-case entered wrongly.
n
Solution:-
n
Our approach is to change the Type of a text-box from “Text” to “Password” or vice versa , as per the convenience of the user.
n
Approach 1:-
nCreating a directive which handles the change event of the user action(We have given “checkbox” option to user to trigger the change event).Check the option “Check Me” and the Password is visible to user.
n
n
 |
| Check Me, to make Password visible |
n
n
nCode:-
n
HTML:-
n
 |
| HTML Code |
nJS:-n
var app = angular.module("MyApp", []);
app.controller("AppCtrl", function($scope) {});
app.directive('passwordCheck', [
function() {
return {
restrict: 'A',
link: function($scope, $element) {
$element.bind("change", function() {
var chkState = $element[0].checked;
chkState ? $('#pwd').attr('type', 'text') : $('#pwd').attr('type', 'password') }); } }; } ])
n
Working Demo
n
nApproach 2:-
n
We have leveraged “Angular Expressions”, to achieve the required functionality.
n
nHere we set a flag , and its value is getting changed based on the change event (which is fired by a user on selection of checkbox).It’s default value is “False”, meaning that textbox default behaviour is “Password” type.
n
nCode:-
n
nHTML:-n
 |
| HTML Code(Using Angular Expressions) |
n
nJS:-
n
n
var app = angular.module("MyApp", []);
app.controller("AppCtrl", function($scope) {});
