Question

该功能工作正常，但到目前为止我一直在使用复选框我只需要密码输入字段中的眼睛图标帮助没有引导程序或字体很棒谢谢

      myFunction() {
  let x : any = document.getElementById("inputPassword");
  if (x.type === "password") {
    x.type = "text";
  } else {
    x.type = "password";
  }
}

<input [(ngModel)]="password" type="password" id="inputPassword"  name="password"
                     placeholder="{{'Password' | translate}}"  required>
                     <input type = "checkbox" (click)="myFunction()">

Answer 1

这里是working example

catid

.ts文件中的

<ion-content padding>

  <form>
    <ion-list>
      <ion-list-header>
       type Password
      </ion-list-header>
      <ion-item>
        <ion-input
          [type]="ismyTextFieldType ? 'text' : 'password'"
          placeholder="Enter your password"
        >
        </ion-input>
        <button
          (click)="togglemyPasswordFieldType()"
          ion-button
          item-right
        >
          <ion-icon
            [name]="ismyTextFieldType ? 'eye-off' : 'eye'"
          >
          </ion-icon>
        </button>  
      </ion-item>
    </ion-list>
  </form>

</ion-content>

Answer 2

我会照做官方记录：

不是在组件中设置类型，而是将动态值用作type属性。

HTML：

<input placeholder="Enter your password" [type]="hide ? 'password' : 'text'">

TS代码：

hide : boolean = true;

myFunction() {
  this.hide = !this.hide;
}

Working_Demo_with_eye_icon

在密码字段角度6中隐藏显示眼睛图标

2 个答案: