feat: Helper & Error Text slot support in inputs

[Marius-Romanus]

feat: Helper & Error Text slot support in inputs

[liamdebeasi]

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.

[Marius-Romanus]

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

[Marius-Romanus]

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

[liamdebeasi]

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'
  }
  
  ...
}

[Marius-Romanus]

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.

[liamdebeasi]

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.

[Marius-Romanus]

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. :)