feat: Ionic v7 Support errorText and helperText across all inputs

[JEVietti]

Prerequisites

• I have read the Contributing Guidelines.
• I agree to follow the Code of Conduct.
• I have searched for existing issues that already include this feature request, without success.

Describe the Feature Request

With ion-item slot error and helper being deprecated for v7, I'd like to ask for support to be made across all input types not just ion-input and ion-textarea. Including: ion-select and ion-checkbox

Also it would be nice if out of the box the padding/margin is configured so the item doesn't shift that page down when errorText appears that doesn't include helper text.

Describe the Use Case

Use ion-select inside of forms with error messages just like ion-input and ion-textarea

Describe Preferred Solution

Add errorText and helperText properties across all input types such as: ion-select, ion-checkbox, and any other input fields to match functionality with ion-item error and helper slot.

Describe Alternatives

Remove ion-note slot "error" and "helper" deprecation, as they are far more configurable and powerful than the errorText and helperText properties.

Related Code

<ion-item> <ion-label position="floating">Test</ion-label> <ion-select formControlName="test"> <ion-select-option [value]="null">Select</ion-select-option> </ion-select> <ion-note slot="helper"> Helper Text </ion-note> <ion-note slot="error"> Error Text </ion-note> </ion-item>

Additional Information

https://ionicframework.com/docs/api/item

[liamdebeasi]

Thanks for the report. Can you provide a little more details about how you'd like to use this feature with non-input form components?

[JEVietti]

Thanks for the report. Can you provide a little more details about how you'd like to use this feature with non-input form components?

It would be used for the same reasons as ion-input, to give error/helper feedback below a component, such as ion-select with a simple message of "Required, due to xyz" or any other message in which a field is invalid or needs help in completing. Especially since currently the slot solution works across all these components: ion-select, checkbox, etc.

One other thing I'd like to mention, its a bit disappointing to make the change to using properties, as its less extensible than the previous slot and templating solution in v6. For instance I was utilizing a library: https://github.com/davidwalschots/angular-reactive-validation to make managing error feedback more easily.

[liamdebeasi]

Thanks for the feedback. The helper and error text slots were designed to match the Material Design spec which only has this feature on inputs: https://m2.material.io/components/text-fields#anatomy.

I don't think helper and error text for components such as checkboxes, radios, toggles, etc is the right solution here because we don't know how these components are being used in your application, so the layout requirements for where error messages are shown can vary significantly between apps.

With the exception of the error text on inputs, we typically leave validation up to the developer given that there is no "one size fits all" approach to visualizing validation.

Are you using Angular Forms? If so, have you tried showing error messages based on the state of each form control?

[JEVietti]

@liamdebeasi

Yes I am using the aforementioned library to help me display errors based on Angular Form states. The slots were helpful for placement, i.e. directly below the ion-item item-bottom line, and could seamlessly transition between helper and error text. If there is another way to place the helper/error text there without these slots then that would frankly solve my issue. As I was not relying on the slot for state or error message handling but more for placement than anything else.

[aosaimy]

I do agree with this request. I ask for not deprecating the helper slot, as I used it for placing helpful text at the bottom of the ion-item. I know that this can be done with some HTML/CSS, but I do not see why do not we keep them. Helpful text is useful for other form elements (e.g. ion-select), not only ion-input and ion-textarea.

[liamdebeasi]

Have you tried using an ion-note below the input? https://codepen.io/liamdebeasi/pen/QWZbvvB. You can conditionally render it based on the state of your form, and that would give you the same functionality as helperText and errorText.

As I mentioned in #27078 (comment), this feature was designed to be used with inputs in order to follow the Material Design (MD) spec. Ionic is designed to follow the iOS and MD specs, so adding this functionality for checkboxes, radios, etc would go against what the MD spec states.