Comments (9)
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.
from ionic-framework.
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 helprText
property, you could extract this logic into a function so you don't need to do nested ternaries.
from ionic-framework.
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:
<ion-item>
<ion-label position="floating">Email</ion-label>
<ion-input formControlName="email" type="email" clearOnEdit="false"></ion-input>
<ion-icon
*ngIf="getForm['email'].invalid && (getForm['email'].dirty || getForm['email'].touched) && (getForm['email'].errors?.['required'] || getForm['email'].errors?.['pattern'])"
class="center-icon-item" slot="end" name="alert-circle" color="danger"></ion-icon>
<ion-note
*ngIf="getForm['email'].invalid && (getForm['email'].dirty || getForm['email'].touched) && getForm['email'].errors?.['required']"
slot="error">email error 1</ion-note>
<ion-note
*ngIf="getForm['email'].invalid && (getForm['email'].dirty || getForm['email'].touched) && getForm['email'].errors?.['pattern']"
slot="error">email error 2</ion-note>
...
</ion-item>
Or to make it a little less repetitive:
<ion-item>
<ion-label position="floating">Email</ion-label>
<ion-input formControlName="email" type="email" clearOnEdit="false"></ion-input>
<ng-container *ngIf="getForm['email'].invalid && (getForm['email'].dirty || getForm['email'].touched)">
<ion-icon *ngIf="getForm['email'].errors?.['required'] || getForm['email'].errors?.['pattern']"
class="center-icon-item" slot="end" name="alert-circle" color="danger"></ion-icon>
<ion-note *ngIf="getForm['email'].errors?.['required']" slot="error">email error 1</ion-note>
<ion-note *ngIf="getForm['email'].errors?.['pattern']" slot="error">email error 2</ion-note>
...
</ng-container>
</ion-item>
Greetings
from ionic-framework.
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
from ionic-framework.
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'
}
...
}
from ionic-framework.
Hello, yes, that logic can be implemented, but does it seem cleaner to us in the html instead of in ts?
At least to me personally it seemed cleaner to have the error messages in the html.
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.
But in cases where the if comes from a variable and not a function, it would improve performance.
from ionic-framework.
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.
from ionic-framework.
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. :)
from ionic-framework.
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.
from ionic-framework.
Related Issues (20)
- bug: buttons inside `ion-header` not accessible with screenreader (unless scrolled down) HOT 1
- bug: Keyboard interaction on device with inputs/buttons inside of swiper HOT 1
- bug: unintended re-focus to input after selecting clear input button with iOS VoiceOver HOT 5
- bug: ionic8 Conflict between font color and theme color in new dark mode HOT 2
- bug: Auto foucs in ios not work (ionic vue) HOT 1
- feat: Export files in `utils` in distribution HOT 1
- bug: swiper inside ion-content not recognizing dir="rtl" when rendered dynamically HOT 3
- bug: iOS Modal Drag Animation Glitches HOT 2
- feat: Expose ion-input/ion-searchbar value as a signal in Angular HOT 1
- feat: ion-searchbar helperText HOT 6
- bug: ion-input debounce is not set with binding syntax on initial load HOT 4
- bug: iOS - Tap on status bar doesnโt scroll to top HOT 3
- feat: status bar dark in dark-mode HOT 4
- bug: item borders effectively invisible in md dark mode HOT 3
- bug: bundle size increase with IonicModule and lazy loaded web components in v8.0.1 HOT 4
- bug: root remains `aria-hidden` after dismissing multiple overlays consecutively
- bug: IonPage occasionally doesn't render when navigating quickly
- [TRAINING] bug: ion-input retained in memory after removed from DOM
- CapacitorHttp FormData Not Supported on Android Device but it working fine on ionic serve(browser) HOT 1
- bug: Keyboard expansion unable to push bottom elements HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. ๐๐๐
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google โค๏ธ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from ionic-framework.