In Web development, in some moment we want to require hide show input fields like password, because user should check the password what he has type in password fields at the time of user registration in website or any other type of form in which password field is required. So, If you have use AngularJS javascript framework for website development then you can simple use this tutorial for add feature like toggle password in your website. By this feature user can see password what he has filled in password field. This password hide show feature we have made by simple AngularJS script.
If you have work on any form and in that form you may required to use the password input box. Here we have use Bootstrap CSS library with AngularJS, so by using this library we can use glyphicon icon for make stylish user interface. So, when we want to show password then then we will display eye open icon and when we want to hide password then it will display eye close password. So, user can better understand for what he want to do show and hide password.
For make show hide password text we have use different directives of AngularJS javascript framework. By using the magic of their rich angular directive we can achieve our goal to make show hide password feature in our form. Here we have use simple AngularJS expression with name like inputType in input fields type attribute and when page has load then we have set this expression value to password, so that input fields type will be password on page load and we can not see what we have type into this fields. After this we have make one AngularJS function and this function will see when inputType expression value is password then it will change to text and if inputType expression value is text then it will change to password. So, by using this simple we can make toggle password visibility using AngularJS. Below you can find complete source code and online demo of hide show password using AngularJS.
index.php
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Show Hide Password in Form with AngularJS</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<style>
.form_style
{
width: 600px;
margin: 0 auto;
}
</style>
</head>
<body>
<div class="container" ng-app="show_hide_password" ng-controller="show_hide_password_controller">
<br />
<h2 align="center">Show Hide Password in Form with AngularJS</h2><br />
<div class="panel panel-default form_style">
<div class="panel-heading">
<h3 class="panel-title">Login</h3>
</div>
<div class="panel-body">
<div class="form-group">
<label>Enter Email</label>
<input type="text" name="email" class="form-control input-lg" ng-model="email_field" placeholder="Enter Email">
</div>
<div class="form-group">
<label>Enter Password</label>
<div class="input-group">
<input type="{{inputType}}" name="password" class="form-control input-lg" ng-model="password_field" placeholder="Enter Password" />
<span class="input-group-addon">
<span class="{{showHideClass}}" ng-click="showPassword()" style="cursor:pointer"></span>
</span>
</div>
</div>
</div>
</div>
</div>
<br />
<br />
<br />
</body>
</html>
<script>
var app = angular.module('show_hide_password', []);
app.controller('show_hide_password_controller', function($scope){
$scope.inputType = 'password';
$scope.showHideClass = 'glyphicon glyphicon-eye-open';
$scope.showPassword = function(){
if($scope.password_field != null)
{
if($scope.inputType == 'password')
{
$scope.inputType = 'text';
$scope.showHideClass = 'glyphicon glyphicon-eye-close';
}
else
{
$scope.inputType = 'password';
$scope.showHideClass = 'glyphicon glyphicon-eye-open';
}
}
};
});
</script>
de
ReplyDelete