Ionic 2 select: remove selected option
I am using an ion select component on a form, but I have a problem: if users select one option but then want to remove it, it does not give an option. I could add <ion-option>
with an empty value, but I think it won't be good. Is there a better way to solve this?
EDIT: This is how my choices look right now:
If users choose one option and then change their minds and do not want to choose any option, he cannot seem to understand how he can do it. Even if I add "Remove Option" with an empty value, it still looks like an option, I don't find it nice. With the traditional choice, an empty parameter with no text seems pretty intuitive. But in this case I was thinking of something like "(X) Remove selected" next to the "Cancelar / Confirmar" options in the footer or something. Any ideas? Ps: also, the ionic variant seems to strip any html tag I overlay on my variant, so it is rather difficult to format my "select none" option
source to share
@Sonu's solution will work if the user wants to click ion-select
and select an option again select-nothing
, but I don't find a pleasant experience.
An alternative way to get what you want is to use the little clear button next to yours ion-select
, which only appears when the 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 the function that changes the highlight to "No selection"
, possibly setting this.option=null
.
You can of course style this button however you like. You can also look at ionic chips . In particular, removing tokens is one way of realizing your intentions.
source to share
This is the best way to have an option with an empty value. You can use the 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 clear selection.
source to share
To call the function that handles the cancellation selection you can simply 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 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 fire
Documentation: Ion-Select
source to share
I had a slightly different requirement - after selecting an option and clicking OK, the selected value should be used in the function called by ionChange, and then the selected option in ion-select should be canceled. I tried different solutions mentioned on different sites, but none of them worked. Even a working solution in plunker http://embed.plnkr.co/2KVqL2ecColaXgzAfxWI?p=preview, where ngModel is set to null, didn't work for me. So I tried different things and one of them did the trick. Here's the way that worked for me:
In HTML I 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 is used as
@ViewChild('languageSelect') languageSelect: Select;
In langSelected (), it is cleared after the required actions are taken.
langSelected(value) {
//used the value as required
...
...
this.languageSelect.setValue(''); // This is clearing the selected option in ion-select
}
source to share