In web development, we would like to hide input fields as a password at some point, since the user must check the password that he entered in the password fields at the time of user registration on the website or another type in which form the password field is required. If you used the AngularJS JavaScript framework for website development, you can add features such as changing the password on your website in this tutorial. This function allows the user to see the password he has completed in the password field. We created this password hiding feature using a simple AngularJS script.
If you are working in any form and on this form, you may have to use the password entry field. Here we used the Bootstrap CSS library with AngularJS, so we can use the glyph symbol with this library to create an elegant user interface. When we want to display the password, the open eye icon is displayed. If we want to hide the password, the closed eye password is displayed. Therefore, the user can better understand what he wants to show and hide the password.
To change the text of the show hide password, we used instructions other than the AngularJS JavaScript framework. By using the magic of the Rich Angular directive, we can achieve our goal of hiding the function of displaying the password in our form. Here we used a simple AngularJS expression with a name like inputType in the input field type attribute. When the page loads, we set this expression value to password so that the type of the input fields is password in The page is loading and we cannot see what characters have been entered in these fields. After that, we created an AngularJS function, and this function detects if the inputType expression value is a password, changes to text, and if the inputType expression value is text, it changes to password. With this simple method we can change the visibility of the password with AngularJS. Below is the complete source code and online display of the password for hiding with AngularJS.
If you are working in any form and on this form, you may have to use the password entry field. Here we used the Bootstrap CSS library with AngularJS, so we can use the glyph symbol with this library to create an elegant user interface. When we want to display the password, the open eye icon is displayed. If we want to hide the password, the closed eye password is displayed. Therefore, the user can better understand what he wants to show and hide the password.
To change the text of the show hide password, we used instructions other than the AngularJS JavaScript framework. By using the magic of the Rich Angular directive, we can achieve our goal of hiding the function of displaying the password in our form. Here we used a simple AngularJS expression with a name like inputType in the input field type attribute. When the page loads, we set this expression value to password so that the type of the input fields is password in The page is loading and we cannot see what characters have been entered in these fields. After that, we created an AngularJS function, and this function detects if the inputType expression value is a password, changes to text, and if the inputType expression value is text, it changes to password. With this simple method we can change the visibility of the password with AngularJS. Below is the complete source code and online display of the password for hiding with AngularJS.
index.php
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>How Can We Make Show/Hide Password Using 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>
