Search code examples
angularionic-frameworkionic4

"[(ngModel)]" not binding in Ionic 4


I'm building an Ionic application, currently migrating from Ionic 3 to 4. I've got some code which works perfectly in Ionic 3, but not in 4. Basically, I can't seem to bind data with [(ngModel)] in an input field. I've imported FormsModule and added it among my imports in my app.module.ts. Here's how my -component.ts file looks like:

export class SomeComponent implements OnInit {
  someString: string = "test";
  ...
}

And my -component.html

<ion-input type="text" [(ngModel)]="someString"></ion-input>
{{someString}}

Now in my application, {{someString}} rightly shows "test". However, changing the value of the input doesn't affect the someString variable in any way. What could I be missing?


Solution

  • Note: This is a workaround, not the solution. See my edit below

    Curiously, the Ionic 4 input documentation has no mention of ngModel, and rather talks of a value attribute. So I figured, I'd replace [(ngModel)] with [value].

    <ion-input type="text" [value]="someString"></ion-input>
    

    To be able to access that value in my -component.ts file, I do something like:

    -component.html

    <ion-input type="text" [value]="someString" (input)="do_something($event)"></ion-input>
    

    -component.ts

    do_something($event) {
      this.someString = $event.target.value;
    }
    

    EDIT

    Before using the above solution, be certain you're using [(ngModel)] and not [ngModel]. Contrary to what my question stated, [(ngModel)] actually works. I was rather using [ngModel]