How to reset Ion-Select form field in Ionic 3?

Question

I want to present an option to allow user to clear the ion-select form field if they decided to not select an option after already selecting, but I'm having a hard time finding anything to help out.

<ion-item class="formField ionField">
        <ion-label color="primary" stacked>PROJECT</ion-label>
        <ion-select
          #projectName
          ngModel
          name="project"
          interface="action-sheet">
          <ion-option (ionSelect)="projectSelect(project.ProjectName,i)" [value]={ID:project.ID,Name:project.ProjectName} *ngFor="let project of projectArray; let i = index" >{{project.ProjectName}}</ion-option>
        </ion-select>
      </ion-item>

Perhaps something like this? Ionic doesn't have any resources for resetting.

<ion-option (ionChange)="resetValue()">Reset</ion-option>

Any help is appreciated.

What about my answer? is it not suit with your requirement ? — Sudarshana Dayananda, Feb 08 '19 at 02:05
I was wanting to avoid having another ui element on the form to reset, but this will do. Thank You! — Stephen Romero, Feb 08 '19 at 20:26

score 5 · Accepted Answer · answered Feb 07 '19 at 17:38

You cannot use ion-option to reset ion-select form field. But you can provide clear button to reset ion-select if an ion-option is selected as below.

HTML

<ion-content padding>

  <ion-list>
  <ion-item>
    <ion-label>PROJECT</ion-label>
    <ion-select [(ngModel)]="project">
      <ion-option *ngFor="let project of projects" value="{{project}}">{{project}}</ion-option>
    </ion-select>
  </ion-item>
</ion-list>

<button *ngIf="project" ion-button (click)="reset()">clear</button>

</ion-content>

TS

export class HomePage {

  projects: any = [];
  project: string;

  constructor() {
    this.projects = ["project 1", "project 2", "project 3", "project 4"];
  }

  reset() {
    this.project = null;
  }
}

Find working example here

Not working in latest version. – Mayank Kataria Jan 01 '22 at 17:31 — Mayank Kataria, Jan 01 '22 at 17:31

score 0 · Answer 2 · answered Jan 02 '20 at 19:32

Another option that I figured out is to use two exaclty identical ion-select in parallel with their rendering controlled by ngIf. If the ngModel has value then first ion-select gets rendered, otherwise, second one gets rendered and because while rendering a new ion-select, it will not have any selected option by default, it works perfectly fine for both (null and non-null) ngModel values.

How to reset Ion-Select form field in Ionic 3?

2 Answers2