Ionic 7 | New forms Input API and styling

Ionic Framework
1

Hello everyone.

I am working on the migration one of my applications to the new Ionic 7 version, but I am having some difficulties regarding the new API for inputs and forms. My application is a web app that primarily runs in the browser.

The problem lies in the fact that the inputs in my application have a slight visual customization that was easily achieved in the old version of Ionic since the was a completely distinct component from the , just by customizing each of the respective elements.

How can I customize the input to look this way using the new API?

image

Ionic 6

<ion-col size="12">
        <ion-label required>Username</ion-label>
        <ion-input  formControlName="username" 
                    class="text-input"
                     placeholder="Fill your username"
	             [legacy]="true">
        </ion-input>
</ion-col>

Ionic 7

<ion-col col="12">
	<ion-input  formControlName="username" 
			    fill="outline"
			    label="Username" 
				labelPlacement="stacked"
				placeholder="Fill your username">
	</ion-input>
</ion-col>

This would work perfectly if the label created automatically by the new API didn’t overlap with the outline.

2

you can continue to use the legacy sistem,
just put aria-label=“your-input-name” in the tag
example:

<ion-col size="12">
      <ion-label required>Username</ion-label>
      <ion-input  formControlName="username" 
              class="text-input"
               placeholder="Fill your username"
	             aria-label="username">
      </ion-input>
</ion-col>
3

Hi @ciccilleju,

Thank you for your reply.

Considering your suggestion, since my binding is dynamic because I’m using ngx-translate (I simplified the examples above), I think the correct way would be:

<ion-input formControlName="username"
           [attr.aria-label]="'Username' | translate"
           class="text-input"
           placeholder="Fill your username">
</ion-input>

I was testing with [legacy]=“true” attribute, but that was causing the deprecation warnings.
When using aria-label I’m I targeting the legacy system or the new one?

As I understood from the documentation, the legacy system will be deprecated, being removed in a future version. Since I was migrating, I would prefer to do all the necessary refactoring now, so I could support new versions in the future.

4

Hi @hats
I have the same problem as you did. Have you found a solutiion?