CODEWITHSUNDEEP
javascriptangularangular-materialradio-buttonselection
mightycode Newton
mightycode Newton

Reputation: 3949

How to reset dropdown value if user change from radio button in Angular material?

I have 6 radio buttons, like this:


  <mat-radio-button
          *ngFor="let option of searchOptions"
          [value]="option"
          (change)="setSelectedSearchOptions(option.label)"
        >
          {{ option.label }}
        </mat-radio-button>

and I have a dropdownlist like this:

 <div  class="search-select searchoptions"  *ngIf="showDropdownVcheqCode && selectedSearch">
          <mat-select placeholder="Opties" name="option" [(ngModel)]="selectedValueOptie" (ngModelChange) = "reset()" >
            <mat-option *ngFor="let option of returnEcheqCodes$ " value="{{option.family}}" > {{ option.title}} </mat-option>
          </mat-select>
        </div>

So if a user switched from one radio button to a other radio button. The selected values from the dropdownlist has to be resetted.

I try it with this function:

reset(optionLabel: string){
    if (optionLabel === 'QrCode') {
      this.selectedValueOptie = '';
    }

    if(optionLabel === 'Vcheq' ) {
      this.selectedValueOptie = '';

    }

  }

But that doesnt work.

SO how to archieve this?

Thank you

Upvotes: 0

Views: 1561

Answers (2)

Yvan
Yvan

Reputation: 1121

You have to set the value to undefined. 

reset(optionLabel: string){
    if (optionLabel === 'QrCode') {
      this.selectedValueOptie = undefined;
    }

    if(optionLabel === 'Vcheq' ) {
      this.selectedValueOptie = undefined;

    }

  }

Upvotes: 0

Surjeet Bhadauriya
Surjeet Bhadauriya

Reputation: 7156

So first you have to add a <option> with empty value inside mat-select and then inside reset function just reset the value of selectedValueOptie.

HTML

<div class="search-select searchoptions"  *ngIf="showDropdownVcheqCode && selectedSearch">
   <mat-select placeholder="Opties" name="option" [(ngModel)]="selectedValueOptie" (ngModelChange) = "reset()" >
      <mat-option value="">Please Select</mat-option>
      <mat-option *ngFor="let option of returnEcheqCodes$ " value="{{option.family}}" > {{ option.title}} </mat-option>
   </mat-select>
</div>

Component // Just unset the value to an empty string

reset(){
    this.selectedValueOptie = '';
  }

Upvotes: 1

Related Questions