在 Ionic 中更改 Alert Controller 中输入的输入类型

Question

是否可以使用提示本身内的唯一按钮修改警报控制器中的输入类型？

问题：

我想在用户按下“查看密码”按钮时将输入类型“密码”更改为“文本”。你对此有什么建议吗？

修改密码(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 无法满足您的要求。这是一个非常基本的组件，它只是 returns 一个 json 对象，而不是表单本身。

为了您的目的，您应该按照评论中 Ravi 的建议去做，use a PopoverController with custom component.

您可以从上面的 link 中获取剩余部分，但这里是您关心的部分：

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>

一旦添加到您的主要代码（未发布在您的问题中），您将能够通过弹出对象访问数据。

Answer 2

我会为每个输入分配一个 id

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

然后我会像这样更改输入类型

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

在 Ionic 中更改 Alert Controller 中输入的输入类型

Change the Input Type of Inputs in Alert Controller in Ionic

alert

firebase

angularfire

ionic-framework

angular