6

I have a form connected to models with NgModel as follows:

<form #orderForm="ngForm" (ngSubmit)="onSubmit(orderForm)">

<ion-list class="contact_view">

  <ion-item>
      <ion-label stacked>{{ 'ADDRESS_LINE_1' | translate }}</ion-label>
      <ion-input type="text" required placeholder="{{ 'ADDRESS_LINE_1_PLACEHOLDER' | translate }}" clearInput="true" name="addressLineOne" [(ngModel)]="order.addressLineOne"></ion-input>
  </ion-item>

  <ion-item>
      <ion-label stacked>{{ 'ADDRESS_LINE_2' | translate }}</ion-label>
      <ion-input type="text" placeholder="{{ 'ADDRESS_LINE_2_PLACEHOLDER' | translate }}" clearInput="true" name="addressLineTwo" [(ngModel)]="order.addressLineTwo"></ion-input>
  </ion-item>
  .... 
  .... 
  ....
 </ion-list>
 </form>

This has been working well for me when I was using it as one direction binding from the view to the model.

Now, I want to be able to update the input value from the code, as follows:

ionViewDidEnter() {
    // attempt to load order from memory
    this.storageService
    .get<Order>(StorageKeys.ShippingDetails)
    .then(order => {
        // if order was loaded
        if (order) {
            // test
            this.order.addressLineOne = "aaaa"; // test
            // update UI components

            //this.changeDetectorRef.markForCheck(); // not working

            //this.changeDetectorRef.detectChanges(); // not working
            // run inside ngZone to update UI

            //this.ngZone.run(() => {
                    // init order from memory
                    //this.order.addressLineOne = "bbbb"; // not working
            //    });
        }
    });
}

The AddressLineOne is only updated when one of the inputs is focused.

I tried changeDetectorRef.markForCheck() ,detectChanges() and running inside ngZone - but non of those worked.

UPDATE

// THIS LINE WORKS
this.order.addressLineOne = "aaba";

 this.storageService
     .get<Order>(StorageKeys.ShippingDetails)
     .then(order => {
        // if order was loaded
        if (order) {
            // THIS LINE DOESN"T WORK
            this.order.addressLineTwo = "aaaa";
            // update UI components
            this.changeDetectorRef.markForCheck();
        }
    });

When the model is updated from an async callback it doesn’t work.

Can someone point me in the right direction?

Omri Btian
  • 6,499
  • 4
  • 39
  • 65

0 Answers0