无法使用Angular材质清除按钮单击时的下拉值

Question

我需要在使用Angular8单击按钮时清除所有表单值。我在下面解释我的代码。

<form [formGroup]="formFilter" novalidate>
   <div class="panel-body school-header p-2 p-2">
      <div class="col-sm-3">
         <mat-form-field appearance="outline">
            <mat-select
               placeholder="Filter By Branch" 
               aria-label="Filter By Branch" 
               (selectionChange)="onStoreSelectionChanged2($event)"
               disableOptionCentering
               >
               <mat-option>
                  <ngx-mat-select-search formControlName="storeFilterCtrl" [(ngModel)]="storeFilterCtrl" placeholderLabel="Type your store.."></ngx-mat-select-search>
               </mat-option>
               <mat-option *ngFor="let s of stores | filter : 'StoreName' : storeFilterCtrl;" [value]="s.StoreCode">
               <span *ngIf="!s.StoreCode">
               </span>
               <span *ngIf="s.StoreCode">
               {{s.StoreName}} <small *ngIf="s?.StoreBranch !== ''">,{{s.StoreBranch}}</small>
               </span>
               </mat-option>
            </mat-select>
         </mat-form-field>
      </div>
      <div class="col-sm-2">
         <mat-form-field appearance="outline">
            <mat-label>From Date</mat-label>
            <input matInput [matDatepicker]="picker1" [value]="date.value || ''" (dateChange)="onDateSelectionChanged($event)">
            <mat-datepicker-toggle matSuffix [for]="picker1"></mat-datepicker-toggle>
            <mat-datepicker #picker1></mat-datepicker>
         </mat-form-field>
      </div>
      <div class="col-sm-3">
         <mat-form-field appearance="outline">
            <mat-label>To Date</mat-label>
            <input matInput [matDatepicker]="picker2" [min]="minDate" [max]="maxDate" [value]="date.value || ''" (dateChange)="onDateSelectionChanged1($event)">
            <mat-datepicker-toggle matSuffix [for]="picker2"></mat-datepicker-toggle>
            <mat-datepicker #picker2></mat-datepicker>
         </mat-form-field>
      </div>
      <div class="col-sm-4">
         <button mat-raised-button class="m-10 ml-0" color="accent" (click) ="getFilteredData();">Apply</button>&nbsp;
         <button mat-raised-button class="m-10 ml-0" color="warn" (click) ="clearData();" *ngIf="clearFilter">Clear</button>
      </div>
   </div>
</form>

我需要在用户单击clear按钮时清除所有表单字段。我在下面解释我的打字稿代码。

    this.formFilter = this.fb.group({
          storeCode: [''],
          storeFilterCtrl:[''],
          order_dates: ['']
        })
    clearData() {
        this.formFilter.controls['storeCode'].setValue('');
        this.formFilter.controls['order_dates'].setValue('');
        this.formFilter.reset();

        this.clearFilter=false;
      }
onStoreSelectionChanged2(event: any) {
    this.formFilter.controls['storeCode'].setValue(event.value);
  }

根据我的代码，当用户单击clear按钮时，表单将被清除，但下拉列表中仍显示值。在这里，我需要清除表单以及所有输入字段中的值。