在 Ionic 的警报控制器中更改输入的输入类型答案

【问题标题】：Change the Input Type of Inputs in Alert Controller in Ionic在 Ionic 的警报控制器中更改输入的输入类型
【发布时间】：2021-06-09 17:30:42
【问题描述】：

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

问题：

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

更改密码代码（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();
  }//

实际错误

【问题讨论】：

到目前为止你有什么尝试？
data.newPassword.type = 'text' 抛出错误。 “无法在警报控制器中的字符串上创建属性 'type'”
但是当您点击View Password 时，您的警报会自动消失。在这种情况下，您可以尝试 PopoverController 使用自定义组件
这是表格先生的完整代码。我将整个表单放在警报控制器中。

标签： angular firebase ionic-framework alert angularfire

【解决方案1】：

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

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

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

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

【讨论】：

这是一个不错的小解决方法。我猜你的意思是使用getElementById？ const passwordInput = document.getElementById('new-id'); passwordInput.setAttribute('type', 'text')

【解决方案2】：

AlertController 无法满足您的要求。它是一个非常基本的组件，它只返回一个 json 对象，而不是表单本身。

出于您的目的，您应该按照 Ravi 在 cmets 中的建议进行操作，use a PopoverController with custom component.

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

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>

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

【讨论】：