は、表示/非表示パスワード

Question

とイオン2のログインを作成するためにどのように私はこの使用して、イオン2のようなデザインを作りたかったのです。

ここに私の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> 

だし、ここでの結果だ - ここに私.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'); 
    } 

} 

だ>http://prntscr.com/gz12xg

問題は、目のアイコンは、クリックできない、です。コンソールからのログはありません。

アイアイコンをクリックすると、パスワードフィールドからの入力のみが可能になります。

誰かが私を助けることができますか？私は目のアイコンをクリック可能にしたいだけです。

Answer 1

あなたは、単にそれをクリック可能にするために、ボタンでそれをラップすることができます：

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

は、スタイルは、アイコンの大きさを制御するために属性を使用します。あなたの.tsファイルに 以下のように行うことができます

Answer 2

はあなた.html書き込みこの

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

でこのコード

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

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

を書いて、これはあなたの.scssコードになります。必要に応じて変更してください

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