cool tech graphics

How To: Create a form show/hide password system in AngularJS

Filed under:

Numerous times during working with AngularJS there have been these moments of, oh, wow... OH, now that's cool... wow... Usually followed up by a warm happy feeling because what I wanted to do was possible and the solution was so simple. This started to happen pretty frequently. As a result I have started to make notes of when these situations occurred. So that I can do a quick posting about them to share with others having similar problems. Here is one of those handy tricks.

A form I was working on required the use of a password input box. But the kicker was that this input box had an accompanying checkbox that would display the password when checked. Angular makes this pretty easy for us to do without any nasty tricks.
This is the solution that I used:

<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">

The magic of angular directives helps us accomplish our goal. What I have setup is two different input fields. One of them is setup as a standard text type, the other setup as a password type. The important part is that both input fields are sharing the same model. This ensures that the same data exists between both of the fields. A change in one of them will update the value of the other. Next, a model is bound to the value of the "Show Password" checkbox. This model is also used as the argument for the ng-show and ng-hide directives on the input fields.

What this does is when the checkbox is marked, the showpassword model evaluates to true. That true then gets applied to the ng-show directive on the standard text field, causing it to be visible. Likewise, the ng-hide value on the password input gets set to true, causing it to be invisible. This effectively will make the input boxes trade places making only one of them visible at a time giving us the effect that there is a shown/hidden password depending on that checkbox being clicked. The swap is instantaneous and no visual issues occur, a fluid and clean show/hide password mechanic.

Date posted: December 20, 2013


Thanks for this post.

This example is Working fine for simple text, but not working with password validation like ng-minlength, ng-maxlenth, ng-pattern and directive also.
Please suggest what to do.

To avoid extra fields with duplicate content, consider:

<input type="{{showpassword ? 'text' : 'password'}}" ng-model="password">
That will toggle the type instead of having to distinct items

when doing this, the browser will autoComplete your input because type=password....

Add new comment

Restricted HTML

  • Allowed HTML tags: <a href hreflang> <em> <strong> <cite> <blockquote cite> <code> <ul type> <ol start type> <li> <dl> <dt> <dd> <h2 id> <h3 id> <h4 id> <h5 id> <h6 id>
  • You can enable syntax highlighting of source code with the following tags: <code>, <blockcode>, <cpp>, <java>, <php>. The supported tag styles are: <foo>, [foo].
  • Web page addresses and email addresses turn into links automatically.
  • Lines and paragraphs break automatically.

Metal Toad is an Advanced AWS Consulting Partner. Learn more about our AWS Managed Services

Have questions?