Как установить два поля ввода одним датчиком

Question

Цель состоит в том, чтобы заполнить два поля ввода одновременно.Посмотрите на мой код:

    <mat-form-field>
      <input
        matInput
        [matDatepicker]="startDate"
        formControlName="SaleDate"
      />
      <mat-datepicker-toggle
        matSuffix
        [for]="startDate"
      ></mat-datepicker-toggle>
      <mat-datepicker #startDate></mat-datepicker>
    </mat-form-field>
    <mat-form-field>
      <input
        matInput
        [matDatepicker]="endDate"
        formControlName="ExportDate"
      />
      <mat-datepicker-toggle
        matSuffix
        [for]="endDate"
      ></mat-datepicker-toggle>
      <mat-datepicker #endDate></mat-datepicker>
    </mat-form-field>

Оба поля заполняются датами, выбранными в средствах выбора даты.Теперь я пытаюсь добиться того, чтобы при выборе даты в первом указателе даты обе даты были установлены на свое значение (одно и то же значение), но когда задана вторая, изменяются только те, что позволяет выбирать данные за один день.-получает с половиной усилий.Это вообще возможно?Я играл с [matDatepicker]="startDate && endDate", [for]="startDate && endDate", но все, что я получил, это то, что открывался второй указатель даты для каждого поля, все еще устанавливая свои значения отдельно.

Answer 1

На самом деле мне удалось найти решение в официальной документации материала (см. Datepicker выбранного значения в примерах), и все, что нужно было сделать, это добавить [value]="serviceOrderForm.get('SaleDate').value" ко второму входу,Это работает как шарм!

<mat-form-field>
  <input
    matInput
    [matDatepicker]="startDate"
    formControlName="SaleDate"
  />
  <mat-datepicker-toggle
    matSuffix
    [for]="startDate"
  ></mat-datepicker-toggle>
  <mat-datepicker #startDate></mat-datepicker>
</mat-form-field>
<mat-form-field>
  <input
    matInput
    [matDatepicker]="endDate"
    formControlName="ExportDate"
    [value]="serviceOrderForm.get('SaleDate').value"
  />
  <mat-datepicker-toggle
    matSuffix
    [for]="endDate"
  ></mat-datepicker-toggle>
  <mat-datepicker #endDate></mat-datepicker>
</mat-form-field>

Answer 2

Чтобы изменить второе при изменении первого, вы можете добавить прослушиватель событий к компоненту для запуска функции при его изменении.

<mat-form-field>
  <input
    matInput
    [matDatepicker]="startDate"
    formControlName="SaleDate"
    (change)="onStartDateChange"
  />
  <mat-datepicker-toggle
    matSuffix
    [for]="startDate"
  ></mat-datepicker-toggle>
  <mat-datepicker #startDate></mat-datepicker>
</mat-form-field>
<mat-form-field>
  <input
    matInput
    [matDatepicker]="endDate"
    formControlName="ExportDate"
  />
  <mat-datepicker-toggle
    matSuffix
    [for]="endDate"
  ></mat-datepicker-toggle>
  <mat-datepicker #endDate></mat-datepicker>
</mat-form-field>

Затем в вашем машинописном тексте onStartDateChangeдолжен выглядеть примерно так

onStartDateChange() {
    this.endDate = this.startDate;
}