Angular12表单内DatePicker点击清除按钮报只读属性错误如何解决

DevOps 小满

2026-10-7

解决方案

错误根源

你代码中定义的fromDate和toDate是仅带getter的只读计算属性，返回的是表单控件的值而非FormControl实例本身，因此既不能直接赋值，也不具备setValue/reset等表单控件方法，这是你前两种尝试失败的核心原因。

修复步骤

1. 修改两个清空方法

直接操作filterForm中对应的单个表单控件调用reset()方法，只会清空目标日期选择器，不会影响另一个：

clearFromDate() {
  // 单独清空fromDate控件
  this.filterForm.get('fromDate')!.reset();
  this.dataSource.data = this.LiftData;
}

clearToDate(event: { stopPropagation: () => void; }){
  event.stopPropagation();
  // 单独清空toDate控件
  this.filterForm.get('toDate')!.reset();
  this.dataSource.data = this.LiftData;
}

2. 可选优化：只有选中日期时才显示清空按钮

你当前HTML中清空按钮的*ngIf="fromDate"判断的是模板变量（日期选择器实例），会永久为真导致X按钮一直显示。如果需要仅当用户选中日期后才显示X，修改判断逻辑即可：

<!-- fromDate 清空按钮修改 -->
<button *ngIf="filterForm.get('fromDate')?.value" matSuffix mat-icon-button aria-label="Clear" (click)="clearFromDate()">
  <mat-icon matDatepickerToggleIcon >close</mat-icon>
</button>

<!-- toDate 清空按钮同步修改 -->
<button *ngIf="filterForm.get('toDate')?.value" matSuffix mat-icon-button aria-label="Clear" (click)="clearToDate($event)">
  <mat-icon matDatepickerToggleIcon >close</mat-icon>
</button>