ngModel not updating ionic-input

Ionic Framework ionic-v3
1

I have a simple form

<ion-input type="name" [(ngModel)]="name"></ion-input>

I then update it

changeMe() {
   cordovaPlugin.xx(result => {  
      this.name = "new name";
  })
}

I have a cordova plugin that I call using cordovaPlugin.xx, and its callback updates the form. The problem is I cannot see the change in UI until i tap the screen or inspect the textbox.

How do I get the textbox to refresh with the new content without having to interact with it?

2

If at all possible, use an ionic-native shim for your plugin. That should magically make things work without additional work on your part. If that’s not possible, you’ll effectively need to write your own. Wrapping the callback to create a zone-aware Promise would be the approach I would take.

3

Any chance you can elaborate a bit more on this ?

4

This shows how to leverage the heavy lifting done by the ionic-native project to make your own shim. If you don’t want to go to that effort, I’m suggesting something like this:

changeName(): Promise<string> {
  rv = new Promise((resolve, reject) => {
    cordovaPlugin.xx(result => {
      resolve(result);
    });
  });
  return rv;
}

changeName().then((newName) => {
  this.name = newName;
});

Obviously, this doesn’t have any error handling, because I don’t know how your plugin deals with errors. If you do it this way, then none of your app code has to worry about zones, because Angular monkeypatches Promise to handle all that for us.

1 Like
5

Awesome, was tearing my hair out over this! thank you sooo much !