Angular 在打开日历之前，视图中的日期选择器值不会更新

我有两个日期选择器

startDate

和

endDate

。我正在尝试实施基本日期验证，其中开始日期不能晚于结束日期

我需要确保 如果用户选择的结束日期早于开始日期，则开始日期应更改为所选的结束日期。

我正在使用

（dateChange）

事件发射器，它会更改模型中

startDate

的值，但是，在我与

startDate

日期选择器元素交互之前，实际视图中的字段值不会更新

HTML

<mat-form-field>
    <mat-label>Start date</mat-label>
    <input matInput [matDatepicker]="fromDate" [value]="startDate"
        (dateChange)="changeStartDate($event)" [matDatepickerFilter]="startDateFilter">
    <mat-datepicker-toggle matSuffix [for]="fromDate">
        <mat-icon matDatepickerToggleIcon>keyboard_arrow_down</mat-icon>
    </mat-datepicker-toggle>
    <mat-datepicker #fromDate></mat-datepicker>
</mat-form-field>
<mat-form-field>
    <mat-label>End date</mat-label>
    <input matInput [matDatepicker]="toDate" [value]="endDate"
        (dateChange)="changeEndDate($event)" [matDatepickerFilter]="endDateFilter">
    <mat-datepicker-toggle matSuffix [for]="toDate">
        <mat-icon matDatepickerToggleIcon>keyboard_arrow_down</mat-icon>
    </mat-datepicker-toggle>
    <mat-datepicker #toDate></mat-datepicker>
</mat-form-field>

---

数据绑定不会立即获取对

startDate

的更正，因为作为日期对象引用的绑定值不会更改。您可以通过创建新的日期对象来确保检测到更改：

changeEndDate（事件）{
如果（event.valuestartDateFilter = (selectedDate: Date | null): boolean => {
  return selectedDate < new Date()  && selectedDate < this.endDate;
}

endDateFilter = (selectedDate: Date | null): boolean => {
  return selectedDate < new Date();
}

changeStartDate(event) {
  this.startDate = event.value;
}

changeEndDate(event) {
  if (event.value < this.startDate) {
    this.startDate.setTime(event.value.getTime());
  }
  this.endDate = event.value;
}

endDate = new Date();
startDate = new Date(this.endDate.getFullYear(), this.endDate.getMonth(), this.endDate.getDate()-7);