Ion-select one or multiple selections

Ionic Framework ionic-v3
1

Hey guys!

I have an ion-select field with multiple options. The difficulty is that the user should select one special option or select multiple of the other options what means that the special option automatically would be deselected if the user select one of the other options and if the user select the special option the other options would be deselected.

This is my html code and my changeCategories funtion thaat supports jet that on selection of the other values the special value would be deselcted:

<ion-item>
      <ion-label stacked>Select</ion-label>
      <ion-select multiple="true" [(ngModel)]="selectedCategories" (ionChange)="changeCategories($event)">
        <ion-option value="-1">special value</ion-option>
        <ion-option *ngFor="let category of categories" [value]="category.id" checked="true">{{category.name}}</ion-option>
      </ion-select>
</ion-item>

public changeCategories() {
    if (this.selectedCategories.length > 2 && this.selectedCategories.indexOf("-1") > -1) {
      this.selectedCategories = this.selectedCategories.filter(item => item !== "-1");
    }
  }

I worked here with ionChange but the event would only be called when the user hits ok on the select modal and not directly on select. Is there any other solution?

1 Like
2

Please always share all the relevant code, in this instance, the component code. Someone trying to help might need to know exactly how you are declaring and initialising the variables being used for example.

Btw, I don’t know exactly what your case is but how are you letting end users know of this mechanism? Is this UI strictly needed?

1 Like