angular - 取消选择 Angular 中的 Mat 选定值

Question

我正在构建一个使用 Angular 12 和 Angular Material 的应用程序。在这我有一个材料选择和一个重置按钮。单击重置按钮时，我需要从 Mat Select 中取消选择所选值。我尝试了各种方法，例如将 [value] 设置为 null 并使用反应式表单将值设置为 null 或空字符串。但它不起作用。

以下是代码文件，以便更好地理解

报警组件.html

  <form [formGroup]="dateFormGroup">
    <mat-form-field>
      <mat-label>{{'Filter'| translate}} {{'DATETIME'|translate}}</mat-label>
      <mat-select id="dateTimeSelected" name="dateTimeSelected" formControlName="dateTimeSelected">
        <option value="" disabled>{{'Select'|translate}} {{'DATETIME'|translate}}</option>
        <mat-option *ngFor="let item of dateTimeArr" [value]="item" (click)="dateTimeFilter(item)">
          {{item}}
        </mat-option>
      </mat-select>
    </mat-form-field>
    <button mat-flat-button class="btn commonBtn" (click)="resetFilters()">{{'Reset'|translate}}</button>
  </form>

警报组件.ts

export class AlarmComponent implements OnInit{
dateFormGroup = new FormGroup({});

constructor(){
    this.dateFormGroup =  new FormGroup({
      dateTimeSelected: new FormControl()
    });
  }
  resetFilters(): any {
    console.log(this.dateFormGroup.value.dateTimeSelected);
    this.dateFormGroup.value.dateTimeSelected = null;
    this.dataSource.filter = '';
    this.todoService.getAlerts(this.currentSensorId).subscribe((response: any) => {
      this.tableData = [];
      this.dateTimeArr = [];
      for (let i = 0; i < response.alertResponses.length; i++) {
        this.tableData.push(response.alertResponses[i]);
        this.dateTimeArr.push(moment(response.alertResponses[i].dated).format('YYYY-MM-DD'));
        this.dateTimeArr = [...new Set(this.dateTimeArr)];
      }
    });
  }
}

截图

请问有什么解决办法吗？

标签： angularangular-material

Answer 1

您不能像这样分配值：this.dateFormGroup.value.dateTimeSelected = null

您必须使用 patchValue 或 setValue 来重置控制值。

this.dateFormGroup.controls['dateTimeSelected'].setValue(null);