New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
feat: Helper & Error Text slot support in inputs #29100
Comments
Thanks for the report. How were you doing things with the deprecated helper/error slots? From the example you provided it looks like you would still need to conditionally render text based on the validation state. For the |
Hello, I have never really used the helper, I have put it because they go together in the documentation (although I suppose it could also be the case that you want different help depending on an if). The one I use is the error, in version 6 it had something similar to this:
Or to make it a little less repetitive:
Greetings |
I add a little context, it would be very similar to the Angular documentation with error handling: https://angular.io/guide/form-validation#validating-input-in-template-driven-forms |
Does your application architecture support the ability to extract the logic to a helper function? The benefit here is it would let you achieve the desired result and also have a template that is a bit easier to parse. Some rough pseudo code: <ion-input [errorText]="getErrorText()"></ion-input> getErrorText() {
if (email.invalid && (email.dirty || email.touched) && email.errors?.required) {
return 'email error 1'
}
...
} |
Hello, yes, that logic can be implemented, but does it seem cleaner to us in the html instead of in ts? It is also assumed that with zone.js it is better not to have a function in a template that affects performance, but well that would be minimal and I understand that the get form also does the same in terms of performance. |
Have you tried listening for status changes on the form control? In this callback you can check the validity state. From there, you can assign an error message to a variable. This variable you can then render in the template. That should avoid any performance issues with rendering a function in a template. |
Hello, I'm sorry I couldn't answer sooner. Yes, it would be another valid option. Personally, I find it more readable and concise as it was done in the past, in HTML. Please consider that option, if you do not feel free to close the issue. :) |
Thanks for the added info! We don't have plans to add this new API at the moment because the desired behavior is achievable with the existing API. I am going to close this, but let me know if you have any questions. |
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. |
Prerequisites
Describe the Feature Request
Hello!
Previously the helpers and errors were separate tags:
with the new inputs this has become helperText and errorText as an attribute within the ion-input itself (errorText).
This is fine if you only have one type of error, but when you have more than one or even custom errors, it forces you to create monstrous things like this:
In that example I have only put required and pattern errors, but there could be many more
It would be nice to at least have a slot to be able to add the if to each corresponding error message and not have to make ternaries within an attribute.
Greetings!
Describe the Use Case
ion-inputs where you may have more than one type of error
Describe Preferred Solution
Something similar to what there is now with label:
https://ionicframework.com/docs/api/input#label-slot-experimental
Describe Alternatives
No response
Related Code
No response
Additional Information
No response
The text was updated successfully, but these errors were encountered: