在 Ionic 中更改警報 Controller 中的輸入類型

Question

是否可以使用提示本身內的唯一按鈕修改警報 Controller 中的輸入類型？

問題：

1. 當用戶按下查看密碼按鈕時，我想將輸入類型“密碼”更改為“文本”。 你對此有什么建議嗎？

更改密碼代碼 (profile.ts)

 async changePassword(){
    let alert = await this.alertCtrl.create({
      header: 'Change Password',
      subHeader: 'Fill up the fields.',
      inputs: [
        {
          name: 'oldPassword',
          placeholder: 'Old Password.',
          type: 'password'
        },
        {
          name: 'newPassword',
          placeholder: 'New Password.',
          type: 'password',
          value: this.generatePassword(8) //This generate the password
        },
        {
          name: 'newPasswordConfirm',
          placeholder: 'Confirm New Password',
          type: 'password'
        }
      ],
      buttons: [
        {
          text: 'Cancel',
          role: 'cancel',
          handler: data => {
            console.log('Cancel clicked.');
          }
        },
        {
          text: 'View Password',
          handler: data => {
            data.newPassword.type = 'text'; //Error exists
            return false;
          }
        }
      ]
    });
    await alert.present();
  }//

實際錯誤

Answer 1

AlertController 無法滿足您的要求。 它是一個非常基本的組件，它只返回一個 json object 給您，而不是表單本身。

出於您的目的，您應該按照 Ravi 在評論中的建議進行操作，使用帶有自定義組件的 PopoverController。

您可以從上面的鏈接中獲取其余部分，但這里是您關心的部分：

Popovercomponent.page.ts

import { Component } from
'@angular/core';
 import {PopoverController} from '@ionic/angular';
 import { FormBuilder } from '@angular/forms';
 @Component({
   selector: 'app-popovercomponent',
   templateUrl: './popovercomponent.page.html',
   styleUrls: ['./popovercomponent.page.scss'],
 })
 export class PopovercomponentPage {

    form = this.formBuilder.group({
     newPassword: [''],
     oldPassword: [''],
     newPasswordText: [''],
     oldPasswordText: [''],
   });

   showPassword = false;
   doUpdate = false;

   constructor(private popover:PopoverController,
               private formBuilder: FormBuilder) {}

  toggleShowPassword(): void {
    this.showPassword = !this.showPassword;

    if (showPassword) {
      this.form.patchValue({
        oldPasswordText: this.form.oldPassword.value,
        newPasswordText: this.form.newPassword.value
      });
    } else {
      this.form.patchValue({
        oldPassword: this.form.oldPasswordText.value,
        newPassword: this.form.newPasswordText.value
      });
    }

  }

  cancel(): void {
    this.popover.dismiss();
  }

   update(): void {
     this.doUpdate = true;
     this.popover.dismiss();
   }
 } 

Popovercomponent.page.html

<ion-content padding>
  <ion-grid>
    <form>
      <ion-row *ngIf="!showPassword">
        <ion-col><input type="password" [formControlName]="oldPassword" placeholder="Old Password"></ion-col>
      </ion-row>
      <ion-row *ngIf="showPassword">
        <ion-col><input type="text" [formControlName]="oldPasswordText" placeholder="Old Password"></ion-col>
      </ion-row>
      <ion-row *ngIf="!showPassword">
        <ion-col><input type="password" [formControlName]="newPassword" placeholder="Confirm new password"></ion-col>
      </ion-row>
      <ion-row *ngIf="showPassword">
        <ion-col><input type="text" [formControlName]="newPasswordText" placeholder="Confirm new password"></ion-col>
      </ion-row>
      <ion-row>
        <ion-col>
          <ion-button color="success" expand="block" (click)="update()">Update</ion-button>
        </ion-col>
      </ion-row>
      <ion-row>
        <ion-col>
          <ion-button color="success" expand="block" (click)="togglePassword()">View Password</ion-button>
        </ion-col>
      </ion-row>
      <ion-row>
        <ion-col>
          <ion-button color="success" expand="block" (click)="cancel()">Cancel</ion-button>
        </ion-col>
      </ion-row>
    </form>
  </ion-grid>
</ion-content> 

一旦添加到您的主代碼（未在您的問題中發布），您將能夠通過彈出窗口 object 訪問數據。

Answer 2

我會為每個輸入分配一個 id

inputs: [
    {
      name: 'oldPassword',
      placeholder: 'Old Password.',
      type: 'password', 
      id: 'new-id'
    },

然后我會像這樣改變輸入類型

let passwordInput = document.getElementsByClassName('new-id');
passwordInput.setAttribute('type', 'text')