<ion-list>
<ion-item *ngFor="let item of itemList; let i = index;">
<ion-label stacked primary>An item</ion-label>
<ion-input type="text" [(ngModel)]="itemlist[i]"></ion-input>
<ion-item> <ion-list>
It works fine functionally, except for one strange, bad thing: Every time I type a character in the input field, it loses focus. So I have to click the input field again to enter the next character. This happens in a browser (ionic serve) and on an iPhone (ionic run). Is there a trick to this I am missing?
(At first I thought it should be [(ngModel)]=âitemâ but that errors out with âUnhandled Promise rejection: Cannot assign to a reference or variable!â)
It has something to do with the *ngFor, because this does not have a problem:
I put a plunker together for it http://plnkr.co/edit/tJFPUR?p=preview but unfortunately the plunker doesnât run at all when I add the ngModel with the array element in the *ngFor.
I think that your list is reloaded again by ngFor when you change one field value, and that is why it is losing the focus. You can add a trackBy to determine if the list must or must not be reloaded. The code below seems to solve the issue:
<ion-list>
<ion-item *ngFor="let item of itemList; let i = index; trackBy: customTrackBy">
<ion-label stacked primary>An item</ion-label>
<ion-input type="text" [(ngModel)]="itemList[i]"></ion-input>
</ion-item>
</ion-list>