CODEWITHSUNDEEP
javascripthtmlangulartypescript
abidinberkay
abidinberkay

Reputation: 2025

How to clear combobox selected value in Angular

I have a simple html file containing 1 combobox and 1 clear button. How can i make that clear button that when clicked cleans combobox selected value. Here is my code:

mat-card-content fxLayout="row wrap" fxLayoutAlign="left" fxLayoutGap="30px">

          <mat-form-field fxFlex="30%">
            <mat-select placeholder="Choose Employer"
                        [(ngModel)]="customModel"
                        #activeEmployers="ngModel"
                        required>
              <mat-option *ngFor="let emp of employerList" [value]="emp.displayName">{{emp.displayName}}
              </mat-option>
            </mat-select>
          </mat-form-field>
        </mat-card-content>
        <mat-card-actions>
          <button type="button" class="get-button" (click)="getEmployers()">
            CLEAR
          </button>
        </mat-card-actions>
      </mat-card>

But in here, if i use

<button type="button" class="get-button" (click)="onClearSelected()">
                CLEAR
              </button>

and in ts file:

onclear(){this.employerList=null}

then it clears all options of combobox. How can i reach the only selected value and clear it ?

Upvotes: 0

Views: 1666

Answers (1)

NTP
NTP

Reputation: 4448

You need to clear the value of [(ngModel)]. Change your onclear function with the following

onclear(){this.customModel=null}

setting employerList to undefined clears the options of your select.

Upvotes: 2

Related Questions