[SOLVED] ion-input now requires providing a label

ion-input now requires providing a label

I have been migrating my code to Ionic 7 and one of the warning is the following message:

`node_modules_ionic_core_dist_esm_ion-item_8_entry_js.js:2 [Ionic Warning]: ion-input now requires providing a label with either the "label" property or the "aria-label" attribute. To migrate, remove any usage of "ion-label" and pass the label text to either the "label" property or the "aria-label" attribute.

Example: Example with aria-label: `

Now it wants me to change my code, from

<ion-item lines="full"> <ion-label position="floating">User Name</ion-label> <ion-input type="text" formControlName="user_name" [class.invalid]="!mainForm.controls['user_name'].valid && (mainForm.controls['user_name'].dirty || submitAttempt)"> </ion-input> </ion-item>

<ion-item lines="full"> <ion-input type="text" formControlName="user_name" label="User Name" position="floating" [class.invalid]="!mainForm.controls['user_name'].valid && (mainForm.controls['user_name'].dirty || submitAttempt)"> </ion-input> </ion-item>

For those that are not aware of the difference, the changes are that we drop ion-label and incorporate it into ion-input. The warning seems to go away, however the position='floating' does not work anymore.

Does anyone know how to migrate whilst keeping the floaing functionality intact?

I tried changing that line from position to fill and it is still not allowing.

Solution

IonInput now has a property to set the label position, called labelPlacement. You can set the label to float as follows:

  <ion-item>
    <ion-input label="Floating label" labelPlacement="floating" placeholder="Enter text"></ion-input>
  </ion-item>

see https://ionicframework.com/docs/api/input

This upgrade sure has a whole lot of changes!