feat: input validation in alerts

[Farbdose]

Feature Request

Ionic version:

[x] 4.x

Describe the Feature Request

Alert dialogs do not support user-friendly input validation currently.

Describe Preferred Solution

It would be nice if they could use Angular form validation.

Describe Alternatives

The handler option of AlertInputs should be usable in all AlertInputs and not just checkbox and radiobox

Related Code

No usage of handler property: https://github.com/ionic-team/ionic/blob/master/core/src/components/alert/alert.tsx#L362

Additional Context

https://github.com/ionic-team/ionic/issues/12540 https://github.com/ionic-team/ionic/pull/12541 https://github.com/ionic-team/ionic-v3/issues/228 https://stackoverflow.com/questions/57377432/alertinput-handler-never-gets-called/57430187#57430187

[davidgeary]

This is particularly relevant given that the AlertInput class allows min and max values to be specified, but handles it silently by preventing the alert from exiting, so the user is provided with no indication of what (or which field) is invalid.

[waterplea]

Why on earth is handler not used for other input types? What is the purpose of this omission and why in 3 years nothing has changed in that regard?

[liamdebeasi]

Thanks for the issue and apologies for the delay. There are a few different requests here, so I am going to address them individually:

---

Request: Add input validation for ion-alert

I discussed this with the team, and this is not something we are looking to add to Ionic at this time. Native alert dialogs do not have form validation built into their alerts and were designed for simple prompts. This includes alerts found on iOS and alerts created via the JavaScript prompt() API.

Adding complex form validation and error messages into a small dialog such as ion-alert can lead to a confusing and hard to use interface. However, there are two alternative patterns that are commonly found on mobile apps:

1. Showing a dialog with an error after the first dialog closes.

You can display any errors in an alert that displays after the first alert is dismissed. This works best on alerts that only have one or two text inputs (such as an email/password prompt).

2. Using a modal for a richer experience.

If you have anything more complex than one or two text inputs, I strongly encourage you to use an ion-modal instead. Using a modal will give you significantly more control over the layout, form validation, and any other complex logic than if you used ion-alert.

If you would like to avoid the full page look of an ion-modal, consider using ion-modal to create a custom dialog. An example on how to do that can be found on our documentation website: https://ionicframework.com/docs/api/modal#custom-dialogs

---

Bug Report: Specifying min and max values prevents ion-alert from exiting

I was not able to reproduce this behavior, so it is possible that this was a bug that has since been resolved. Sample Demo: https://stackblitz.com/edit/angular-bhoqsw?file=src%2Fapp%2Fexample.component.ts

---

Bug Report: handler is not used for text inputs

This is unrelated to the request to add form validation to ion-alert, so I recommend opening a new issue. This handler feature was added back in Ionic v3, so it is possible that the behavior you reported was an omission on the team's part. If you open another ticket, please include your use case for needing handler to work on other input types. That will help us prioritize the request appropriately.

---

I am going to close this as the original request was for form validation in ion-alert. I recommend opening a new issue for any other bugs or requests. Please let me know if you have any questions. Thank you!

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