feat: Custom attributes for AlertController component

[elinake]

Feature Request

Ionic version:

[x] 4.x

Copied from https://github.com/ionic-team/ionic-framework/issues/7819, it was closed for Ionic 3 and I couldn't find a corresponding feature request that is open or solved.

Short description of the problem: We can't add some custom attributes for inputs in alertController.

What behavior are you expecting? I think it is necessary that we could add custom attributes like maxlength, id, style and etc to inputs in alertController.

I suggest we have a new option in inputs named "attr" that can set custom attributes for inputs. for example like this:

let alert = this.alertCtrl.create({
    title: 'Login',
    inputs: [
      {
        name: 'test',
        placeholder: 'Test name',
        attr: { maxlength: 6, id: "test", style:"color:red; font-size: 14px;" }
      }
    ],
    buttons: [
      {
        text: 'Cancel',
        role: 'cancel',
        handler: data => {
          console.log('Cancel clicked');
        }
      }
    ]
  });
  alert.present();
}

[liamdebeasi]

Thanks for the feature request. I am going to close this as this is already possible in Ionic Framework. You can use the attributes option to pass custom attributes to the rendered inputs:

It's a little hard to find in the docs, but you can find an example on https://ionicframework.com/docs/api/alert#usage. I copied it below:

  {
      name: 'name8',
      type: 'password',
      placeholder: 'Advanced Attributes',
      cssClass: 'specialClass',
      attributes: {
        maxlength: 4,
        inputmode: 'decimal'
      }
    }

If the feature is not working, please make sure you are on the latest version of Ionic Framework.

[elinake]

@liamdebeasi Right, it was in Ionic 5, I was using version 4, that makes sense. Thanks for the answer.

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.