Ion-select changes resets my whole form

Ionic Framework
1

I have an ion-select which has loaded data from a rxjs observable. Every time there is a change in my observable the ion-select is updated which is correct behaviour. However, my whole form is cleared too. Is there a way to disable this?

<form *ngIf="sendForm" [formGroup]="sendForm" id="sendForm">
    <ion-list class="ion-no-padding">
      <ion-item class="no-hover no-ripple ion-no-padding" lines="none">
        <ion-label position="stacked">Token</ion-label>
        <ion-select
          interface="action-sheet"
          formControlName="tokenid"    
          [(ngModel)]='itemSelected'
          (ionChange)="onItemSelection($event)"
          class="no-hover no-ripple input"
          [placeholder]="myTokens.length > 0 ? 'Select A Token' : 'No sendable tokens available.'"
          > 
        <ion-select-option *ngFor="let token of myTokens" [value]="token.tokenid" class="token-option">
          <span *ngIf="token.tokenid !== '0x00'">
            {{ token.token + " &mdash; "+ token.tokenid.substring(0, 5)+'...'+token.tokenid.substring(token.tokenid.length-3, token.tokenid.length) }}
          </span>
          <span *ngIf="token.tokenid === '0x00'">
            {{ token.token + " &mdash; "+ token.tokenid.substring(0, 5) }}
          </span>
        </ion-select-option>
      </ion-select>
      </ion-item>

...

and my observable…


this.apiService.$balance.subscribe((res: Token[]) => {
     this.myTokens = res;
2

I don’t really understand what you mean by “whole form is cleared”, but I would suggest some housecleaning here.

You only want at most one input binding and one output binding per form control. You have two inputs and three outputs here.

Either use reactive forms (formControlName) or template-driven forms (ngModel), not both. If you choose reactive forms, get rid of ionChange and subscribe to valueChanges of the FormControl in the controller instead. If you choose template-driven forms, either get rid of the (ngModelChange) binding - meaning [ngModel] not [(ngModel)] or get rid of the ionChange. Centralize whatever you are doing on view-to-model changes on that single handler.

3

I got you thanks, I’ll clean that up.

What I meant by whole form clearing is that input values are cleared whenever there is change in ion-select, (inputs that have nothing to do with the observable)

4

This is no longer the case, fixing up handlers has fixed the issue, thanks!