Angular Material如何清除mat-date-range-picker日历选中状态

问题复现代码 #

HTML 模板 #

<mat-form-field appearance="fill">
    <mat-label>Enter a date range</mat-label>
    <mat-date-range-input [rangePicker]="picker">
      <input matStartDate placeholder="Start date" #startDateInput />
      <input matEndDate placeholder="End date" #endDateInput />
    </mat-date-range-input>
    <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
    <mat-date-range-picker #picker></mat-date-range-picker>
 </mat-form-field>
 <button class="btn" (click)="resetInformation()">Clear</button>

TS 逻辑 #

@ViewChild('startDateInput', { static: false }) startDateInput?: ElementRef<HTMLInputElement>;
@ViewChild('endDateInput', { static: false }) endDateInput?: ElementRef<HTMLInputElement>;

range = new FormGroup({
  start: new FormControl(null),
  end: new FormControl(null),
});

resetInformation() {
  this.startDateInput!.nativeElement.value = '';
  this.endDateInput!.nativeElement.value = '';
  this.range.reset();
}

异常表现 #

点击清空按钮后，输入框内容被清空，但打开日历面板时，之前选中的日期仍然保留高亮选中状态：

问题原因 #

手动操作nativeElement修改输入框值的方式绕开了Angular Material组件的内部状态同步逻辑，同时日期输入控件没有和定义的range响应式表单做绑定，调用range.reset()时无法将重置状态同步到日历选择器实例，最终导致面板内的选中高亮状态没有被清除。

修复方案 #

• 给日期范围输入控件绑定响应式表单，移除手动操作DOM修改输入框值的逻辑
• 获取日期范围选择器实例，重置时同步清空选择器内部选中状态

修复后的HTML代码 #

<mat-form-field appearance="fill">
    <mat-label>Enter a date range</mat-label>
    <!-- 绑定range表单组 -->
    <mat-date-range-input [rangePicker]="picker" [formGroup]="range">
      <!-- 分别绑定开始、结束日期的表单控件 -->
      <input matStartDate placeholder="Start date" formControlName="start" />
      <input matEndDate placeholder="End date" formControlName="end" />
    </mat-date-range-input>
    <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
    <mat-date-range-picker #picker></mat-date-range-picker>
</mat-form-field>
<button class="btn" (click)="resetInformation()">Clear</button>

修复后的TS代码 #

import { Component, ViewChild, ElementRef } from '@angular/core';
import { FormGroup, FormControl } from '@angular/forms';
import { MatDateRangePicker } from '@angular/material/datepicker';

@Component({
  // 组件元数据保持原有配置即可
})
export class YourComponent {
  // 获取日期范围选择器实例
  @ViewChild('picker') picker: MatDateRangePicker<Date>;

  range = new FormGroup({
    start: new FormControl<Date | null>(null),
    end: new FormControl<Date | null>(null),
  });

  resetInformation() {
    // 重置表单，绑定后会自动同步输入框显示内容
    this.range.reset();
    // 强制清空选择器内部选中状态，消除残留高亮
    this.picker.select(null);
  }
}

注意事项 #

• 不要直接操作nativeElement修改Angular Material组件的输入框值，这类操作会绕开框架和组件的状态同步机制，大概率会出现数据和视图不一致的问题
• 使用响应式表单绑定后，表单值的所有变更都会自动同步到组件视图，不需要手动操作DOM更新显示内容

内容的提问来源于stack exchange，提问作者manjiro sano