How can we make show/hide password input in angular js with bootstrap 3?
45,889
Solution 1
You can dynamically change the input type with the ng-attr-type directive. For example:
<input ng-attr-type="{{ showPassword ? 'text' : 'password' }}">
you can tie the showPassword to the click event and make it toggle.
Update (from @Ferie's comment):
HTML
<span class="showPassword" ng-click="togglePassword()">{{ typePassword ? 'Hide' : 'Show' }}</span><br> <input type="{{ typePassword ? 'text' : 'password' }}" name="password" placeholder="Password">
In the Angular Controller
$scope.togglePassword = function () { $scope.typePassword = !$scope.typePassword; };
Solution 2
AngularJS / UI Bootstrap Solution
- Use Bootstrap's has-feedback class to show an icon inside the input field.
- Make sure the icon has
style="cursor: pointer; pointer-events: all;"
- Use
ng-if
to show/hide different forms where the<label type="password">
vs<label type="text">
HTML
<!-- index.html snippet -->
<!-- show password as type="password" -->
<div ng-if="!showPassword"
class="form-group has-feedback">
<label>password</label>
<input type="password"
ng-model="params.password"
class="form-control"
placeholder="type something here...">
<span ng-if="params.password"
ng-click="toggleShowPassword()"
class="glyphicon glyphicon-eye-open form-control-feedback"
style="cursor: pointer; pointer-events: all;">
</span>
</div>
<!-- show password as type="text" -->
<div ng-if="showPassword"
class="form-group has-feedback">
<label>password</label>
<input type="text"
ng-model="params.password"
class="form-control"
placeholder="type something here...">
<span ng-if="params.password"
ng-click="toggleShowPassword()"
class="glyphicon glyphicon-eye-close form-control-feedback"
style="cursor: pointer; pointer-events: all;">
</span>
</div>
JavaScript
// app.js
var app = angular.module('plunker', ['ui.bootstrap']);
app.controller('MainCtrl', function($scope) {
$scope.params = {};
$scope.showPassword = false;
$scope.toggleShowPassword = function() {
$scope.showPassword = !$scope.showPassword;
}
});
Give it as spin with the plunker: http://plnkr.co/edit/oCEfTa?p=preview
Solution 3
you can simply do
<input ng-show="showpassword" type="text" ng-model="password">
<input ng-hide="showpassword" type="password" ng-model="password">
<input type="checkbox" ng-model="showpassword" ng-checked="false">
read here
Solution 4
Here's a working demo:
var app = angular.module('myApp', []);
app.controller('loginCtrl', function($scope) {
$scope.showPassword = false;
$scope.toggleShowPassword = function() {
$scope.showPassword = !$scope.showPassword;
}
});
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<form name="form" ng-app="myApp" ng-controller="loginCtrl" novalidate>
<label>
Password:
<input type="password" name="password" ng-model="password" ng-attr-type="{{ showPassword ? 'text':'password'}}" />
<div ng-click="toggleShowPassword()" ng-class="{'fa fa-eye': showPassword,'fa fa-eye-slash': !showPassword}" style="cursor: pointer;"></div>
</label>
</form>
Solution 5
You can also try this one
<input type="{{showPassword?'text':'password'}}" />
<input type="checkbox" title="Show Password" ng-model="showPassword" ng-checked="showPassword">
Comments
-
Karthik almost 4 years
I want to make show/hide password input in angularjs with Bootstrap 3.
The toggle option needs to be inside the input.
Can you provide a snippet or example on that.
Thanks a million.
-
Karthik about 9 yearsThank you for your response, I have tried this but I have like to have what I have added in edited answer how can make it out from this.
-
Stone over 8 yearsTo round out this excellent answer, here's the Bootstrap info requested: getbootstrap.com/components/#input-groups Use an input-group-addon.
-
grep over 7 yearsWhy do u use: $scope.params = {}; ?
-
Derek Soike over 7 years@grep
$scope.params
is just an object for holding variables.$scope.params.password
gets set by angular'sng-model="params.password"
in the html. You'd probably have a login or sign up button that triggers some function that would access the variables in $scope.params. -
FiniteLooper about 7 yearsto be 100% valid HTML, you'll need to add the
type="password"
as well, but at angular runtime this will be replaced. Just a tip for anyone that has any kind of automatic HTML validation tooling. -
Ferie about 7 yearsHTML
<span class="showPassword" ng-click="togglePassword()">{{ typePassword ? 'Hide' : 'Show' }}</span><br> <input type="{{ typePassword ? 'text' : 'password' }}" name="password" placeholder="Password">
In the Angular Controller$scope.togglePassword = function () { $scope.typePassword = !$scope.typePassword; };
-
cSteusloff about 6 yearsWelcome to SO, please describe your answer and do not only post source code!