Как отформатировать данные после выбора материала Datepicker?

Question

Я использую datepicker из материала Angualr с реактивной формой:

<mat-form-field >
  <mat-label>Начальная дата...</mat-label>
  <input formControlName="start" matInput [matDatepicker]="dateOrderDgeStart" />
  <mat-datepicker-toggle matSuffix [for]="dateOrderDgeStart"> </mat-datepicker-toggle>
  <mat-datepicker #dateOrderDgeStart></mat-datepicker>
</mat-form-field>

Этот datepicker подключается к реактивной форме с помощью элемента управления: formControlName="start".

Когда пользователь выбирает значение, элемент управления формой formGrop.control["start"] принимает значение: Thu Jul 09 2020 00:00:00 GMT+0300 (Voronej Standard Time).

Проблема в том, что у меня более 20 одинаковых датпикеров, и я не хочу улавливать событие изменения в каждом компоненте, например:

(dateChange)="changeEvent('change', $event)"

changeEvent(type: string, event: MatDatepickerInputEvent<Date>) {
    console.log(event.value);
}

Вместо этого я перебирать все элементы формы (элементы управления) и выполнять преобразование значений:

for (const key of Object.keys(formGroup)) {
   if (key == 'date1' || key == 'date2' || key == 'date3') {
        // Format date here
   }

Но мне это тоже не нравится, потому что у меня более 50 датпикеров, и это выглядит фиктивным:

if (key == 'date1' ... }

Как решить эту проблему и только с датпикеров от значения mm.dd.yyyy?

Было бы создано, если возможно, для проверки по типу, например:

if (control.type === 'date') {
   // Make values chnages
}

Answer 1

почему бы не попробовать сделать еще l oop для счетчика datepicker

let datePickerCount = 50;
for (const key of Object.keys(formGroup)) {
   for(let i = 1; i <= datePickerCount ; i++){
     if (key == 'date'+i) {
        somedate+i = formatDate(new Date(event), "MM/dd/yyyy", "en-US")
     }
   }

не забудьте импортировать formatDate

import { formatDate } from '@angular/common';

Answer 2

используйте MAT_DATE_FORMATS для изменения fromat

    const APP_DATE_FORMATS: MatDateFormats = {
      parse: {
         dateInput: 'LL',
      },
     display: {
       dateInput: 'YYYY-MM-DD',
       monthYearLabel: 'YYYY',
       dateA11yLabel: 'LL',
       monthYearA11yLabel: 'YYYY'
     }
   };

и добавьте его к провайдеру модуля

{ provide: MAT_DATE_FORMATS, useValue: APP_DATE_FORMATS },