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?