Angular Ionic ion-select ngModel not binding to value

Question

I have an ion select that is not in a form. I have an ngModel attributed defined and bound to "selectedValue". When I make a selection on the list and click ok, I can see my selections in the ionChange method, but when I console log my selectedValue variable it is always null.

My aim in using the two way binding was so that I can reset my selections when I call the resetSelectList function. The reset works on the first attempt but then not at all after that. Because the selectedValue is never being populated with the selected values.

Why can't I have it bound?

PS c:\app> ionic -v 6.10.0 ; angular 9

HTML

<ion-select multiple="multiSelect" 
    (ionChange)="onSelectChange($event)" 
    [(ngModel)]="selectedValue" 
    name="my-select-dropdown"
    ngDefaultControl>
<ion-select-option *ngFor="let entity of prmEntities$ | async" [value]="entity">
    {{entity.entityName}}
</ion-select-option>

TS

selectedValue;

    onSelectChange(e) {
        console.log('select ionChange event triggerd - value of this.selectedValue: ',this.selectedValue); //this returns null
        console.log('select ionChange event triggerd: ', e); //this event has my selected data
        this.entitySelectionList = e.detail.value;
        this.entitySelectionChange.emit(this.entitySelectionList);
}

resetSelectList() {
  console.log('my-select component - resetSelectList called - value of this.selectedValue: ',this.selectedValue); //value or selectedValue is always null
  // this.resetValues$.next(null); //this did not work, and apparently you cannot bind the [(ngmodel)] to async value, gives error
  this.selectedValue = null; //change this to a behaviour subject and emit a new value whenever it changes and bind the control to it async --this did not work
}

eDriven_Levar eDriven_Levar · Accepted Answer · 2021-09-21T11:42:35

What is probably missing is that you didn't include the Forms Module from Angular

import { FormsModule } from '@angular/forms';
@NgModule({
 declarations: [
 ...
 ],
imports: [
 CommonModule,
 IonicModule,
 RouterModule,
 FormsModule
 ...
 ],

Angular Ionic ion-select ngModel not binding to value

1 Answers