重置按钮未清除日期范围选择器小部件角度材质中的日期选择

Question

我在日期范围选择器中有一个重置按钮，但是当我尝试使用重置按钮重置所选日期时，它会重置模型，但不会重置日期范围选择器小部件中的选择。

StackBlitz 链接：https://stackblitz.com/edit/4wfp1v-mbnz3s?file=src%2Fexample%2Fdate-range-picker-overview-example.html

重现步骤：

打开日期范围选择器小部件。 选择日期范围。 单击重置按钮。 请注意，当重置基础模型时，日期范围选择器小部件中的日期选择保持不变。 预期行为 我期望日期范围选择器小部件完全清除所选日期并在单击重置按钮时重置为默认状态，同时重置底层模型。

实际行为 实际行为是，当单击重置按钮时，基础模型将被重置，但日期范围选择器小部件中的选定日期保持突出显示并且不清除。

环境 角度：^19.0.0-next.2 CDK/材质：^19.0.0-next.2 浏览器：Chrome 操作系统（例如 Windows、macOS、Ubuntu）：Windows 和 Ubuntu

Answer 1

这可能是一个错误，您可以在 Angular Material github 中提出并澄清。

作为一种解决方法，只需关闭日期范围选择器，当按下重置按钮时，重新创建视图时，错误就会消失。

@ViewChild(MatDateRangePicker) dateRangePicker!: MatDateRangePicker<any>;
dateRangeForm: FormGroup;
...

...
resetDateRange() {
  this.dateRangePicker.close(); // <- changed here!
  this.dateRangeForm.reset();
  this.cdr.detectChanges();
}
...

Stackblitz 演示