Comment créer connexion dans ionique 2 avec mot de passe show/hide

Question

Je voulais créer un design comme celui-ci à l'aide ionique 2 ->

Ce qui est une fonctionnalité de connexion qui a un mot de passe cacher/show.

Voici mon code HTML

<ion-header> 

    <ion-navbar> 
    <ion-title>Login</ion-title> 
    </ion-navbar> 

</ion-header> 


<ion-content padding> 
<ion-item> 
     <ion-label floating primary>Username</ion-label> 
     <ion-input type="text"></ion-input> 
</ion-item> 
<ion-item> 
     <ion-label floating primary>Password</ion-label> 
     <ion-input type="password"></ion-input> 
     <ion-icon name="eye" item-right (click)="showHide()"></ion-icon> 
</ion-item> 
</ion-content> 

Et voici le résultat ->http://prntscr.com/gz12xg

Voici mon code .ts

import { Component } from '@angular/core'; 
import { NavController, NavParams } from 'ionic-angular'; 

@Component({ 
    selector: 'page-login', 
    templateUrl: 'login.html', 
}) 
export class LoginPage { 

    constructor(public navCtrl: NavController, public navParams: NavParams) { 
    } 

    ionViewDidLoad() { 
    console.log('ionViewDidLoad LoginPage'); 
    } 
    showHide() { 
    console.log('hi'); 
    } 

} 

Le problème est, l'icône de l'oeil, n'est pas cliquable. Aucun journal de la console.

Lorsque je clique sur l'icône représentant un œil, elle me permet uniquement de saisir le mot de passe.

Quelqu'un peut-il m'aider? Je veux juste que l'icône de l'œil soit cliquable.

Answer 1

Vous pouvez simplement envelopper dans un bouton pour cliquable:

<ion-item> 
    <ion-label floating primary>Password</ion-label> 
    <ion-input type="password"></ion-input> 
    <button ion-button clear item-end (click)='showHide()' style="height:32px;"> 
    <ion-icon name="eye" style="font-size:32px;"></ion-icon> 
    </button> 
</ion-item> 

Utilisez des attributs du style pour contrôler la taille de l'icône.

Answer 2

Vous pouvez faire comme ci-dessous dans votre fichier .ts écrire ce code

passwordType: string = 'password'; 
passwordIcon: string = 'eye-off'; 

hideShowPassword() { 
    this.passwordType = this.passwordType === 'text' ? 'password' : 'text'; 
    this.passwordIcon = this.passwordIcon === 'eye-off' ? 'eye' : 'eye-off'; 
} 

dans votre .html écrire ce

<ion-item> 
    <ion-label floating>Password</ion-label> 
    <ion-input formControlName="password" [type]="passwordType" clearOnEdit="false"></ion-input> 
    <ion-icon item-end [name]="passwordIcon" class="passIcon" (click)='hideShowPassword()'></ion-icon> 
</ion-item> 

et ce sera votre code .scss. Change selon vos besoins

.passwordIcon{ 
    font-size:2rem !important; 
    position: relative !important; 
    top: 22px !important; 
    margin: 0 auto !important; 
}