Ionic 4 - ion-input Two Way Binding

Ionic Framework
1

In Ionic 4 how do you do two-way binding. In Ionic 3 I would do the following:

<ion-item color="light"> <ion-input type="string" placeholder="Username" [(ngModel)]="username"></ion-input> </ion-item>

However in Ionic 4 I get the following error:

Can't bind to 'ngModel' since it isn't a known property of 'ion-input'.
    1. If 'ion-input' is an Angular component and it has 'ngModel' input, then verify that it is part of this module.
    2. If 'ion-input' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
    3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("d>
              <ion-item color="light">
                  <ion-input type="string" placeholder="Username" [ERROR ->][(ngModel)]="username"></ion-input>
              </ion-item>
              <ion-item color="light">
    "): ng:///AppModule/LoginPage.html@12:62

How do I get this working in Ionic 4?

2

Looking at the test app, it would seem that you have two options:

  • use an ordinary <input>
  • ensure your <ion-input> is inside an <ion-item>
3

Thanks I certainly have <ion-input> within the <ion-item>. In addition I also tried <input> but get the same error. There must be something wrong with my configuration might try starting from scratch and see if I get the same issue

4

I can confirm there is something wrong with my config as it works without errors in the demo app.

5

Ok found the issue. I don’t use lazy loading in my app and therefore delete the *.module.ts for my page. This module template by default imports FormsModule. This is required to use ngModel hence the error. My fix was simply in app.module.ts is to:

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

and include in imports:[]

3 Likes