CODEWITHSUNDEEP
ionic2
Ronan Lopes
Ronan Lopes

Reputation: 3398

Ionic 2 select: remove selected option

I'm using ion-select component in a form, but got a problem: if users selects one option, but then wanna remove it, it doesn't give the option. I could add a <ion-option> with blank value, but think it wouldn't be nice. Is there a better way to solve that?

EDIT: This is how my select options looks right now: enter image description here

If the users selects one option and then changes his mind and don't wanna select any option, it doesn't seems pretty clear the way he can do that. Even if add a "Remove Option" with blank value, it still looks like an option, doesn't seems nice to me. With a traditional select, the blank option without a text seems pretty intuitive. But in this case, I was thinking in something like a " (X) Remove selected", near to "Cancelar/Confirmar" options in the footer, or something like that. Any ideas? Ps: also, ion-option seems to strip any html tag I put on my option, so it keeps pretty tough to format my "select none" option

Upvotes: 6

Views: 11181

Answers (4)

Snehal Joshi
Snehal Joshi

Reputation: 21

I had a slight different requirement - after selecting an option and clicking on OK button, the selected value should be used in function called by ionChange and then selected option in ion-select should get deselected. I tried various solutions mentioned in various sites but none worked. Even the working solution in plunker http://embed.plnkr.co/2KVqL2ecColaXgzAfxWI?p=preview where the ngModel value is set to null didn't work for me. So I tried myself different things and one them did the trick. Below is the way that worked for me:-

In HTML I have used #languageSelect as template reference variable for ViewChild in ion-select

<ion-label>Select Language</ion-label>
<ion-select #languageSelect (ionChange)="langSelected($event)">
  <ion-option *ngFor="let lang of languages" [value]="lang">{{lang}}</ion-option>
</ion-select>

And in ts file it is used as

@ViewChild('languageSelect') languageSelect: Select;

In langSelected() it is cleared after doing the needful.

langSelected(value) {
 //used the value as required
 ...
 ...
 this.languageSelect.setValue(''); // This is clearing the selected option in ion-select
}

Upvotes: 2

Xxx Xxx
Xxx Xxx

Reputation: 143

To trigger a function that handles the cancel selection you can just use the ionCancel attribute like this

  <ion-select okText="Select" cancelText="Clear"formControlName="selectionValue" (ionCancel)="clearSelection()">
          <ion-option *ngFor="let selection of selections" [value]="selection.value">{{selection.description}}</ion-option>
  </ion-select>

And in the code just implement the function you declared; in this case clearSelection()

clearSelection() {
    this.myModel.selectedValue = null;
}

Now every time you press the clear button your function will be triggered

Documentation: ion-select

Upvotes: 3

Ari
Ari

Reputation: 7556

@sonu's solution will work if the user wants to click on the ion-select again and chose a select-nothing option, but I don't find that a pleasant experience.

An alternative way to get to what you want is to use a small clear button next to your ion-select, which appears only when user has already selected something:

  <ion-label>Options</ion-label>
  <ion-select [(ngModel)]="option">
    <ion-option value="f">Female</ion-option>
    <ion-option value="m">Male</ion-option>
  </ion-select>

  <div *ngIf="option=='m' || option=='f'">
    <ion-label> {{option}} </ion-label>
    <ion-button  (click)='removeSelection()'>
       <ion-icon name='close'></ion-icon>
    </ion-button>
  </div>

Where removeSelection() is a function that changes the selection to "No selection", perhaps by setting this.option=null.

Of course, you can style this button as you wish. You may also want to look at ionic chips. In particular, delete chips are one way to implement your intention.

Ionic chips

Upvotes: 6

Sohan
Sohan

Reputation: 1131

It's better way to have option with blank value.You can use code as per ionic docs

example:

<ion-label>Gender</ion-label>
  <ion-select [(ngModel)]="gender">
    <ion-option value="">Select Gender</ion-option>
    <ion-option value="f">Female</ion-option>
    <ion-option value="m">Male</ion-option>
  </ion-select>

Or you can add any event for selection clear.

Upvotes: 1

Related Questions