Issue
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>
to
<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!
Answered By - De Wet van As
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.