CODEWITHSUNDEEP
angularangular-material2
Mahin Khan
Mahin Khan

Reputation: 776

How to unselect selected option in md-select Angular2

In material2 when a select is initialized no default value is selected. If user selects a value he can't unselect it. I want to enable the user to unselect the value.

Plunkr

I went through the help already available but wasn't able to use it.

<mat-select id="formal"  formControlName="formal" placeholder="Default - No value selected">
   <mat-option value="1">formal</mat-option>
   <mat-option value="2">informal</mat-option>
</mat-select>

Upvotes: 17

Views: 48819

Answers (14)

Ashish poojary
Ashish poojary

Reputation: 157

For anyone reading this for higher versions of angular there's a simple way provided in material docs. You just need to specify an option without a value which essentially sets whatever you have mapped it to as null. Unfortunately there isn't an inbuilt cancel button provided which would've been more convenient but this also works well.

      <mat-select>
         <mat-option>None</mat-option>
         <mat-option *ngFor="let option of options" 
         [value]="option.value">
           {{option.label}}
         </mat-option>
      </mat-select>

Link for reference : https://material.angular.io/components/select/overview#resetting-the-select-value

Upvotes: 0

Jean Souza
Jean Souza

Reputation: 11

For me, work this way in mat-select:

in HTML:

  <mat-form-field class="input-withd-columns-total">
          <mat-label>Ação</mat-label>
          <mat-select #action1>
            <mat-option>{{ viewValue }}</mat-option>
          </mat-select>
  </mat-form-field>

in TS:

@ViewChild("action1") action1: MatSelect;
this.action1.value = null;

Upvotes: 1

Fish
Fish

Reputation: 39

Now you can simply access to options and use 'deselect' method.

Html:

<mat-select #select multiple>
          <mat-option *ngFor="let neighborhood of neighborhoods" [value]="neighborhood">
            {{neighborhood.name}}
          </mat-option>
</mat-select>

Ts:

@ViewChild('select') select: MatSelect;

deselect(value){
   this.select.options.find(option => option.value === value)?.deselect();
}

Upvotes: 0

S&#233;bastien
S&#233;bastien

Reputation: 507

What about using a method of matSelect.

<mat-select (selectionChange)="onChange($event)">

onChange(event: MatSelectChange) {
    const matSelect: MatSelect = event.source;
    matSelect.writeValue(null);
    // ...
}

Upvotes: 32

Omar
Omar

Reputation: 3040

Notice how "--Remove--" does not have a value... when that is selected it will unset any value from before

<mat-form-field appearance="fill">
    <mat-label>{{facet._id}}<span class="red bold" *ngIf="facet.active">*</span></mat-label>
    <mat-select [ngModel]="facet.active" (selectionChange)="filter.emit([{filter: facet._id, option: $event.source.value}, false])" name="Sort">
      <mat-option>-- Remove --</mat-option>
        <mat-option *ngFor="let item of facet.option" [value]="item.value">
          {{item.value}}
          <span>({{item.count}})</span>
        </mat-option>
    </mat-select>
  </mat-form-field>

Upvotes: 0

jenson-button-event
jenson-button-event

Reputation: 18961

Nothing worked for me here, in the end went into a deep hack in the change handler which I feel is unfortunate, but for me, necessary.

@ViewChild('matSelect') matSelect;

...

(this.matSelect.options as any)._results.forEach(opt => opt._selected = false);

Upvotes: 0

Philip Mutua
Philip Mutua

Reputation: 6891

You can have a select with reset option:

<mat-form-field>
  <mat-label>State</mat-label>
  <mat-select>
    <mat-option>None</mat-option>
    <mat-option *ngFor="let state of states" [value]="state">{{state}}</mat-option>
  </mat-select>
</mat-form-field>

Reference from Angular material documentation.

Upvotes: 2

FTello31
FTello31

Reputation: 59

I develop this work around (I'm working with forms too so...), setting the value to undefined to reset the mat-select.

HTML

<mat-form-field>
          <mat-label>Add roles</mat-label>
          <mat-select formControlName="rolesFormCtrlStepper3" (selectionChange)="createRole($event.value)">
                <mat-option *ngFor="let roleComboBox of rolesComboBox" [value]="roleComboBox">
                             {{roleComboBox}}
                </mat-option>
           </mat-select>
</mat-form-field>

TS

createRole(r) {
...
...
    this.formArray.get([2]).get('rolesFormCtrlStepper3').setValue(undefined);
}

Upvotes: 0

Jan Feyen
Jan Feyen

Reputation: 555

a bit late but I just add an option as the first one to allow the user to clear the dropdownlist

<mat-form-field>
      <mat-select placeholder="Parent Organisation" [formControl]="form.controls['parentOrganisationId']">
        <mat-option *ngIf="form.controls['parentOrganisationId'].value" [value]="null">Clear</mat-option>
        <mat-option *ngFor="let option of organisations$ | async" [value]="option.id">
          {{ option.description }}
        </mat-option>
      </mat-select>
    </mat-form-field>

Upvotes: 3

Samir Ghonim
Samir Ghonim

Reputation: 641

<mat-form-field appearance="outline">
            <mat-label>Deal</mat-label>
            <mat-select>
              <mat-option>None</mat-option>
              <mat-option *ngFor="let object of somelist" [value]="object">{{object.property}}</mat-option>
            </mat-select>
</mat-form-field>

Upvotes: 3

Design.Garden
Design.Garden

Reputation: 4237

Updating the accepted answer to Angular 6:

<mat-form-field>
    <mat-select id="formal" [(value)]="selectedValue"  placeholder="Default - No value selected">
        <mat-option value="1">formal</mat-option>
        <mat-option value="2">informal</mat-option>
    </mat-select>
</mat-form-field>

<div  (click)="selectedValue = null">click me to clear md select</div>

Upvotes: 0

Guilherme Sampaio
Guilherme Sampaio

Reputation: 183

If you are using angular forms, you can always patchValue to '' as like below.

First, the select element. This example is using Ionic, but it's the same as Angular.

<ion-select formControlName="formal" item-start>
   <ion-option *ngFor="let option of input.options" value="{{option}}">{{option}}</ion-option>
</ion-select>

<ion-icon color="danger" name="close" (click)="unselect('formal')" item-end></ion-icon>

Where form is a FormGroup.

  form: FormGroup;

And the unselect method patches a null value.

  unselect(id: string): void {
    let reset = {};
    reset[id] = ''
    this.form.patchValue(reset);
  }

Best regards!

Upvotes: 3

Elmer Dantas
Elmer Dantas

Reputation: 4869

I have another solution that I think worth to mention it: add an empty <md-option> and reset the <md-select> on its click

  <md-select id="formal" formControlName="formal" placeholder="Default - No value selected">
      <md-option (click)="form.controls.formal.reset()"></md-option>
      <md-option value="1">formal</md-option>
      <md-option value="2">informal</md-option>
  </md-select>

this way you don't need any custom code in your Component neither use ngModel

see Plunker

Upvotes: 7

Mahin Khan
Mahin Khan

Reputation: 776

I ended up using ngModel and setting that value to undefined to get the required result.

<md-select id="formal" [(ngModel)]="selectedValue" formControlName="formal" placeholder="Default - No value selected">
    <md-option value="1">formal</md-option>
    <md-option value="2">informal</md-option>
 </md-select>

<div  (click)="unselect()">click me to clear md select</div>

In the Component

unselect(): void {
   this.selectedValue = undefined;
}

plunkr for the answer.

Upvotes: 18

Related Questions