Modify the Inputs in Alert Controller in Ionic

Ionic Framework Ionic Angular
1

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

The use case:

  1. A user is capable to view the password by pressing the “View Password” button in the prompt. So in short the “password” type input will be change into “text”, is this possible?

The Alert Controller

image
image361×580 10.2 KB

I tried this code but error exist in passing the data from “View Password” to “newPassword”.

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 error

image

2

I don’t think the current api will support this. So you would have to build you own way using a modal or popover. You can take a look at the source of the alert, to get the styling.

Obviously, you could try to address the wiring internally of the alert, but then you may find yourself lost in fighting with the internals of the component.

1 Like
4

Or use a toast to show the passsord as handler to the view password button

1 Like
5

I got the idea of styling in CSS. So the passing of data from button to input (in the alert prompt) is not literally possible?

The other ideas:
I will try the toast controller for viewing the passwords
To use a modal.
To use popover.

6

In Javascript/CSS many things are possible. And there are a milions ways to achieve things.

The question is if you should go that route. From a learning perspective it can be a rewarding experience, as you will deepen your understanding of Ionic, CSS, shadow dom, and maybe many more.

And maybe also how to spend your time wisely.

1 Like