bug: input-highlight not shown with in the input

[GerardoTovar]

trafficstars

Prerequisites

• [X] I have read the Contributing Guidelines.
• [X] I agree to follow the Code of Conduct.
• [X] I have searched for existing issues that already report this problem, without success.

Ionic Framework Version

v8.x

Current Behavior

When I put a variable in errorText and use formControlName it does not show the line below

Expected Behavior

should show the green line below when used in these conditions

Steps to Reproduce

1- create a new project. 2-You just have to test the operation of the input with a valid email

Code Reproduction URL

https://github.com/GerardoTovar/errorTest_-input

Ionic Info

Ionic:

Ionic CLI : 7.2.0 (/Users/gerardo/.nvm/versions/node/v22.2.0/lib/node_modules/@ionic/cli) Ionic Framework : @ionic/angular 8.2.1 @angular-devkit/build-angular : 18.0.3 @angular-devkit/schematics : 18.0.3 @angular/cli : 18.0.3 @ionic/angular-toolkit : 11.0.1

Capacitor:

Capacitor CLI : 6.0.0 @capacitor/android : not installed @capacitor/core : 6.0.0 @capacitor/ios : not installed

Utility:

cordova-res : not installed globally native-run : 2.0.1

System:

NodeJS : v22.2.0 (/Users/gerardo/.nvm/versions/node/v22.2.0/bin/node) npm : 10.7.0 OS : macOS Unknown

Additional Information

[sean-perkins]

@GerardoTovar can you please state what the problem is and what the expected behavior is?

The form controls show a green input highlight when the control is valid and a red highlight when the control is invalid. From the provided reproduction this appears to be working as expected with Angular's form control API.

[GerardoTovar]

when an error is added dynamically [errorText]="EmailError" with a variable and use formControlName="email" <ion-input type="email" label="Email" labelPlacement="floating" [errorText]="EmailError" formControlName="email" ></ion-input>

gray line is not shown

In the gif I think you can see the difference I don't speak English, I try to write as clearly as I can

Thanks for your time :)

[thetaPC]

Thank you for submitting the issue!

I can see the difference. The gray line is absent when there is no helper text or error text, including empty strings. This is intentional behavior, not a bug.

If you want the line then I would recommend using either

a different fill like:

<ion-input label="Solid input" label-placement="floating" fill="solid" placeholder="Enter text"></ion-input>

or ion-list with the input that has no helper text or error text:

<ion-list lines="full">
    <ion-item>
      <ion-input type="email" label="Email" labelPlacement="floating" errorText="" formControlName="email" ></ion-input>
    </ion-item>
  </ion-list>

with some style changes

ion-item {
  --padding-start: 0;
  --padding-end: 0;
}

I'll be closing this issue since it's an intentional behavior.

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