角垫日期范围选择器，等待使用表单控件选择开始和结束日期答案

【问题标题】：Angular mat date range picker, wait for both start and end date to be selected with form control角垫日期范围选择器，等待使用表单控件选择开始和结束日期
【发布时间】：2022-03-26 11:05:42
【问题描述】：

我定义了一个 Mat 日期范围选择器。有了组件的ts代码，开始日期和结束日期都是表单控件。

为了获取日期选择器的值，我在开始日期和结束日期使用 combineLatest。

我的问题是，当我选择最初的开始日期/结束日期时，它会按预期执行，但是当我返回并修改开始日期和结束日期时，当我单击开始日期时会立即执行 combineLatest因为结束日期已经有值了。

如何在执行代码之前等待开始日期和结束日期都发生变化？

父 ts 代码 -

dateRangeStart: FormControl = new FormControl();
dateRangeEnd: FormControl = new FormControl();
...
...
...
combineLatest([
  this.dateRangeStart.valueChanges, 
  this.dateRangeEnd.valueChanges
]).subscribe((dates) => {
    //logic
  }
})

父级html

      <app-date-picker 
        [dateRangeStart]="dateRangeStart"
        [dateRangeEnd]="dateRangeEnd">
      </app-date-picker>

日期选择器 ts

  @Input() dateRangeStart!: FormControl;
  @Input() dateRangeEnd!: FormControl;
  maxDate: Date | undefined = undefined;

  constructor() { }

  ngOnInit(): void {
    this.dateRangeStart.valueChanges.subscribe(dateRangeStart => {
      if (!!dateRangeStart) {
        const maxDate = new Date(dateRangeStart);
        maxDate.setDate(maxDate.getDate() + 7);
        this.maxDate = maxDate;
      } else {
        this.maxDate = undefined;
      }
    })
  }

日期选择器 html

<div>
  <mat-form-field appearance="fill">
    <mat-label>Enter a date range</mat-label>
    <mat-date-range-input 
      [rangePicker]="picker"
      [max]="maxDate">
      <input 
        matStartDate 
        [formControl]="dateRangeStart" 
        placeholder="Start date">
      <input 
        matEndDate 
        [formControl]="dateRangeEnd" 
        placeholder="End date">
    </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>
</div>

【问题讨论】：

标签： angular typescript angular-material

【解决方案1】：

好吧，我猜当您“返回”时，您会重新初始化 datepicker ts 组件，而 combineLatest 将从 observables 中获取最后一个有效值并立即执行。您的一些解决方案可能是：

使用ngOnDestroy 生命周期将this.dateRangeStart.valueChanges, this.dateRangeEnd.valueChanges 刷新到datepicker ts。
将 combineLatest 本身移动到 datepicker ts 并让父级订阅它。

【讨论】：