ion-input ngModel not working in Ionic 6 - TypeScript

If you are facing an issue with ngModel not working on ion-input in your Ionic 6 application written in TypeScript, then this guide is for you.

Problem Description

The problem occurs when you try to bind a value using ngModel to an ion-input element, but it doesn't seem to work. The value doesn't get updated and remains the same as the initial value.

Solution

To fix this issue, you need to use the FormsModule provided by @angular/forms package in your application.

Step 1: Install the FormsModule

Install @angular/forms package by running the following command in your terminal:

npm install @angular/forms --save

Step 2: Import the FormsModule in App Module

Go to your app.module.ts file and import the FormsModule module from @angular/forms. You can do this by adding the following line of code in your imports array:

import { FormsModule } from '@angular/forms';

@NgModule({
  // ...
  imports: [
    // ...
    FormsModule,
  ],
  // ...
})
export class AppModule { }

Step 3: Use [(ngModel)] instead of ngModel

After importing the FormsModule, you should use [(ngModel)] instead of ngModel to bind the data from the ion-input element to your component. Here's an example:

<ion-item>
  <ion-label>Email</ion-label>
  <ion-input type="email" [(ngModel)]="email"></ion-input>
</ion-item>

In the above example, we are using [(ngModel)] to bind the email value to the ion-input.

Conclusion

By following the above steps, you should now be able to bind the data using ngModel to ion-input in your Ionic 6 application written in TypeScript.