Как создать контроль материала, который содержит другой контроль материала?

Question

Я просто хочу создать элемент управления материалом, который содержит, например, пару средств выбора даты, и вернуть специальную модель обратно, например экземпляр класса DateRange, или средство выбора даты / времени, которое содержит средство выбора даты и некоторый настраиваемый датчик времени.Проблема, с которой я столкнулся в этом случае, состоит в том, что есть две нижние строки: одна внутренняя для выбора даты, а другая - для отображения поля формы.Я видел и пример создания пользовательских элементов управления угловым материалом, который содержит несколько входных данных, но не охватывает все возможные случаи.

Это мой HTML:

<div [formGroup]="fields" fxLayout="row" fxLayoutGap="10px">
  <mat-form-field fxFlex="130px">
    <mat-label>{{ label }}</mat-label>

    <input
      #dateInput
      autocomplete="off"
      matInput
      (focus)="onTouched()"
      (dateInput)="onDateInput($event)"
      (keydown)="onKeyDown($event)"
      [matDatepicker]="datepicker"
      [min]="minDate"
      [max]="maxDate"
      formControlName="date">
    <mat-datepicker-toggle matSuffix [for]="datepicker"></mat-datepicker-toggle>
    <mat-datepicker #datepicker (opened)="onTouched()"></mat-datepicker>
  </mat-form-field>

  <mat-form-field fxFlex="100px">
    <hippo-time-input
      (focus)="onTouched()"
      (timeInput)="onTimeInput($event)"
      [min]="minTime"
      [max]="maxTime"
      [timepicker]="timepicker"
      formControlName="time">
    </hippo-time-input>
    <hippo-timepicker-toggle matSuffix [for]="timepicker"></hippo-timepicker-toggle>
    <ngx-material-timepicker #timepicker></ngx-material-timepicker>
  </mat-form-field>
</div>

Идея состоит в том, чтобы использоватьдве иконки для даты и времени, чтобы открыть сборщик.Этот шаблон вызывает две нижние строчки, когда я помещаю компонент внутрь mat-form-field компонента.Если я заменю mat-form-field в шаблоне на div, мне понадобится стилизовать иконки, чтобы правильно их разместить, но дополнительно будет показана только одна нижняя строка, которая занимает место для обоих подполей.И еще одна проблема, которую я обнаружил, это ширина полей материала по умолчанию, равная 180px, которая ограничивает объем пространства, которое может занимать элемент управления.

Так можно ли повторно использовать элементы управления материалом для создания более сложных элементов управления?