Password show/hide characters in input field?

ionic-v1
1

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}}">
 </label>
2

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">
         </label>
1 Like
3

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

1 Like
4

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>
</label>

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

You can check it on codepen http://codepen.io/felquis/pen/OPdaqK

Hope it help you.

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

css
.showpassword{
position: relative;
right:0.7em;
bottom: 2em;
}
ts
showPassword(input: any): any {
input.type = input.type === ‘password’ ? ‘text’ : ‘password’;
}

1 Like