web-dev-qa-db-fra.com

Comment créer une connexion dans ionic 2 avec afficher/masquer le mot de passe

Je voulais créer un design comme celui-ci en utilisant ionic 2 -> https://codepen.io/Floky87/pen/bVopyZ

Ce qui est une fonctionnalité de connexion qui a un mot de passe masquer/afficher.

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 que l'icône de l'œil n'est pas cliquable. Aucun journal de la console.

Lorsque je clique sur l'icône en forme d'œil, cela me permet uniquement de saisir à partir du champ Mot de passe.

Quelqu'un peut m'aider? Je veux juste que l'icône des yeux soit cliquable.

typescriptloginionic2passwordsshow-hide
3
JSmith

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 écrivez ceci

<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="passwordIcon" (click)='hideShowPassword()'></ion-icon>
</ion-item>

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

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

Vous pouvez simplement l'envelopper dans un bouton pour le rendre 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 les attributs de style pour contrôler la taille de l'icône.

7
David
  public type = 'password';
  public showPass = false;
    showPassword() {
    this.showPass = !this.showPass;
    if(this.showPass){
      this.type = 'text';
    } else {
      this.type = 'password';
    }
  }

      <ion-item class="i2"no-lines>
          <ion-input type="{{type}}" name="password" [(ngModel)]="password" placeholder="Password" style="width: 40px;" no-lines>
        </ion-input>
        <button *ngIf="!showPass" ion-button clear color="dark" type="button" item-right (click)="showPassword()"> 
          <ion-icon name="eye" style="font-size:25px;"></ion-icon>
        </button>
        <button *ngIf="showPass" ion-button clear color="dark" type="button" item-right (click)="showPassword()"> 
          <ion-icon name="eye-off" style="font-size:25px;"></ion-icon>
        </button>
      </ion-item>
1
Pavan Raju