Ionic-framework: feat: AlertController inputs should be having minlength, maxlength options for text fields

[almothafar]

Feature Request

Ionic version:
[x] 5.x

Describe the Feature Request
As sometimes I need to show alert user and asking him for inputs alert AlertInput got options for min/max and seems those working for numeric to date fields, but what if I want to limit the length of the text that user provide, so I think maxlength and minlength should be added.

Describe Preferred Solution
Just adding these to AlertInput and apply the change to the rendered input.

Additional Context
This is been requested in the forum and the solution provided with "hack" but seems is not working for some reason.
https://forum.ionicframework.com/t/ionic-unable-to-fix-maxlength-for-prompt-input-of-alert-controller/119472

[ionitron-bot[bot]]

This issue has been labeled as help wanted. This label is added to issues that we believe would be good for contributors.

If you'd like to work on this issue, please comment here letting us know that you would like to submit a pull request for it. This helps us to keep track of the pull request and make sure there isn't duplicated effort.

For a guide on how to create a pull request and test this project locally to see your changes, see our contributing documentation.

Thank you!

[liamdebeasi]

While we are at it, we should find a way to make it easy for devs to add other input attributes beyond just max/min length.

[cerkiner]

@liamdebeasi perhaps we can have a new generic "attr" option that can set custom attributes for inputs. For example like this:

let alert = this.alertCtrl.create({
    title: 'Login',
    inputs: [
      {
        name: 'pin',
        placeholder: 'Pin Code',
        type: 'password',
        attr: { 
                maxLength: 4,
                inputmode: 'numeric',
                ...
        }
      }
    ],
    buttons: [
      {
        text: 'Cancel',
        role: 'cancel'
      },
      {
        text: 'Save',
        handler: data => {
          console.log('Save clicked');
        }
      }
    ]
  });
  alert.present();
}

[cerkiner]

Another approach could be having individual new options for inputs to set custom attributes while creating alerts;

alert.addInput({
      name: 'pin',
      placeholder: 'Pin Code',
      type: 'password',
      maxLength: 4,
      inputmode: 'numeric',
      ...
});

[cerkiner]

Is anyone interested in this feature? @liamdebeasi

I can spend some time on it if I can learn which approach would be more approvable?

[liamdebeasi]

Hey there! I spoke with the team, and we like the approach found in https://github.com/ionic-team/ionic/issues/21202#issuecomment-628346708, though let's call it attributes instead of attr since we do not abbreviate any of the other names.

Here is our contributing guide that gives you an overview of how to make the changes, test, and create a PR: https://github.com/ionic-team/ionic/blob/master/.github/CONTRIBUTING.md#creating-a-pull-request.

Let me know if you have any questions 😊.

[liamdebeasi]

Thanks for the feature request. This has been resolved via https://github.com/ionic-team/ionic/pull/21365 and will be available in an upcoming release of Ionic Framework. Thanks to @cerkiner for all the hard work in getting this feature done! 🎉

[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.