How to make Password field visible to user in Angular JS?

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.


Requirement:- How a user can check the password entered in the text-box and rectify it in-case entered wrongly.

Solution:- 
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.

Approach 1:-
Creating 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.

Password field
Check Me, to make Password visible



Code:-

HTML:-

HTML Code
HTML Code 

JS:-

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')
});
}
};
}
])

Working Demo

Approach 2:-

We have leveraged “Angular Expressions”, to achieve the required functionality.

Here 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. 

Code:-

HTML:-

Html code
HTML Code(Using Angular Expressions)


JS:-

var app = angular.module("MyApp", []);

app.controller("AppCtrl", function($scope) {
});


ufthelp

One thought on “How to make Password field visible to user in Angular JS?”

Leave a Reply

Your email address will not be published. Required fields are marked *