Change the Input Type of Inputs in Alert Controller in Ionic

Issue

Is the modifying of input type in Alert Controller is possible using the only button inside the prompt itself?

Problem:

1. I want to change the input type "password" into "text" when the user press the View Password button. Do you have any suggestion about that?

change password code (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();
  }//

The actual error

Solution

What you asking is not possible with AlertController. It is a very basic component which only returns a json object to you, not the form itself.

For your purposes you should do as Ravi suggested in the comments, use a PopoverController with custom component.

You can get the remaining portions from the link above but here are the parts you care about:

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> 

Once added to your main code (which is not posted in your question) you will be able to access the data via the popover object.

Answered By - E. Maggini