Ionic 7 & Angular – Disable ion-invalid style dynamically

by

How to dynamically display the ion-invalid style on my input items?

Previously, with Angular 4, it was possible to do the following:

<ion-item [class.invalid]="form.controls.field?.invalid && showInvalidFields">
    <ion-label stacked>Field:</ion-label>
    <ion-input name="field" maxlength="11" required></ion-input>
</ion-item>

In this case, the “invalid” class that changed the field’s color to red was only displayed when my variable showInvalidFields was set to true.

However, I couldn’t achieve the same behavior using Ionic 7 and Angular. There doesn’t seem to be any information about it in the documentation.

I’ve tried:

<ion-item  [ngClass]="{ 'ion-invalid': false }">

and

<ion-item [class.ion-invalid]="false">

But it doesn’t remove the invalid field styling. Does anyone have an idea on how to resolve this?

Leave a Comment