Password show/hide characters in input field?

I’ve added the following to the ‘password’ field in my login, however the isn’t functioning. If I place below the input field it works fine, however I want it in the input field at the right (as it appears now). Any help?

<label class="item item-input item-icon-right">
      <span class="input-label">Password</span><i class="icon ion-eye" ng-click="showPass()"></i>
      <input type="{{showpass}}" id="password" placeholder="Password" value="{{password}}">

Try this (I cant at this moment):

<label class="item item-input item-icon-right">
              <span class="input-label">Password</span><i class="icon ion-eye" on-touch="showPassword = !showPassword"></i>
              <input type="password" id="password" placeholder="Password" ng-model="password" ng-hide="showPassword">
            <input type="text" id="passwordRaw" placeholder="Password" ng-model="password" ng-show="showPassword">
1 Like

As @soutlink suggested, use on-touch instead of ng-click and your problem is solved.

1 Like

I solved it using two inputs and ng-if:

<label class="item item-input item-stacked-label">
  <span class="input-label">Senha</span>
  <input type="text" ng-if="showPasswordIsChecked" name="password" ng-model="userModel.password" required>
  <input type="password" ng-if="!showPasswordIsChecked" name="password" ng-model="userModel.password" required>

<ion-checkbox ng-model="showPasswordIsChecked">Show password</ion-checkbox>

You can check it on codepen

Hope it help you.

<form #loginForm="ngForm">
        <ion-label floating>Email / Phone Number</ion-label>
        <ion-input type="email" [(ngModel)]="login.emailphone" name="emailphone" ></ion-input>
        <ion-label floating>Password</ion-label>
        <ion-input type="password" [(ngModel)]="login.password" name="password" #password></ion-input>
        <ion-checkbox  class="showpassword " color="dark" checked="false" (click)="showPassword(password)"></ion-checkbox>
        <button ion-button block (click)="onLogin(loginForm)" type="submit">Sign In</button>

position: relative;
bottom: 2em;
showPassword(input: any): any {
input.type = input.type === ‘password’ ? ‘text’ : ‘password’;

1 Like