Невозможно проецироватьс в пользовательский компонент

Question

У меня есть приложение Angular 8, которое использует Angular Material. Я пытаюсь создать повторно используемый компонент формы, который реализует интерфейс ControlValueAccessor. Он содержит свою собственную форму, которая имеет два элемента управления, например:

<form [formGroup]="form">

  <mat-form-field>
    <mat-label>{{ nameLabel }}</mat-label>
    <input
      matInput
      type="text"
      formControlName="name"
      [disabled]="disabled"
      (blur)="onTouched()"/>
    <ng-content select="[name-errors]"></ng-content>
  </mat-form-field>

  <mat-form-field>
    <mat-label>{{ dateLabel }}</mat-label>
    <input
      matInput
      [matDatepicker]="picker"
      formControlName="plannedEnd"
      [disabled]="disabled"
      (blur)="onTouched()"
    />
    <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
    <mat-datepicker #picker></mat-datepicker>
    <ng-content select="[date-errors]"></ng-content>
  </mat-form-field>

</form>

и его TypeScript:

import { ChangeDetectionStrategy, Component, forwardRef, Input, OnDestroy, OnInit } from '@angular/core';
import { ControlValueAccessor, FormBuilder, FormGroup, NG_VALUE_ACCESSOR } from '@angular/forms';
import { FormComponent, FormModel } from '@turntown/shared';

import * as moment from 'moment';
import { CreateScheduleReport } from '@turntown/cost-control/set-up/shared';
import { Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';
import { MomentDateAdapter } from '@angular/material-moment-adapter';

@Component({
  selector: 'cc-name-and-date',
  templateUrl: './name-and-date.component.html',
  styleUrls: ['./name-and-date.component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush,
  providers: [{
    provide: NG_VALUE_ACCESSOR,
    useExisting: forwardRef(() => NameAndDateComponent),
    multi: true,
  }],
})
export class NameAndDateComponent implements OnInit, FormComponent, ControlValueAccessor, OnDestroy {

  @Input() nameLabel: string;
  @Input() dateLabel: string;
  private readonly unsubscribe$ = new Subject<void>();

  disabled;
  form;
  onChange = (value: CreateScheduleReport) => {};
  onTouched = () => {};

  writeValue(newValue: CreateScheduleReport): void {
    this.form.setValue(newValue);
    this.onChange(newValue);
  }

  registerOnChange(fn: any): void {
    this.onChange = fn;
  }

  registerOnTouched(fn: any): void {
    this.onTouched = fn;
  }

  setDisabledState(isDisabled: boolean): void {
    this.disabled = isDisabled;
  }

  constructor(protected formBuilder: FormBuilder) {
  }

  ngOnInit() {
    this.form = this.initForm();
    this.onChange(this.form.value);

    this.form.valueChanges.pipe(
      takeUntil(this.unsubscribe$),
    ).subscribe(newFormValue => {
      this.onChange(newFormValue);
      this.onTouched();
    });
  }

  hasError(formControlName: string, error: string): boolean {
    MomentDateAdapter
    return this.form.get(formControlName).hasError(error) && this.form.get(formControlName).touched;
  }

  initForm(): FormGroup {
    const form: FormModel<CreateScheduleReport> = {
      name: [''],
      plannedEnd: [moment()],
    };
    return this.formBuilder.group(form);
  }

  submitForm(event: any): void {
  }

  ngOnDestroy(): void {
    this.unsubscribe$.next();
    this.unsubscribe$.complete();
  }
}

Я использую этот компонент следующим образом:

<form [formGroup]="form">

  <section class="first-reporting-period-details">
    <mat-card>
      <h1>First reporting period details</h1>
      <h3 tt-small>Planned end date of period</h3>

      <cc-name-and-date
        nameLabel="Period Name"
        dateLabel="Period End Date"
        formControlName="period">
        <ng-container name-errors>
          <mat-error *ngIf="hasError('period', 'invalidPeriodName')">
            This is mandatory
          </mat-error>
        </ng-container>
        <ng-container date-errors>
          <mat-error *ngIf="hasError('period', 'invalidPeriodDate')">
            The first reporting period end date must be today or later
          </mat-error>
        </ng-container>
      </cc-name-and-date>
    </mat-card>
  </section>

  <section class="first-stage-details">
    <mat-card>
      <h1>First stage details</h1>
      <h3 tt-small>Planned end date of stage</h3>
      <cc-name-and-date
        nameLabel="Stage Name"
        dateLabel="Stage End Date"
        formControlName="stage">
        <ng-container name-errors>
          <mat-error *ngIf="hasError('stage', 'invalidStageName')">
            This is mandatory
          </mat-error>
        </ng-container>
        <ng-container date-errors>
          <mat-error *ngIf="form.hasError('invalidStageDate')">
            The first stage end date must be the same as the first reporting period end date or later
          </mat-error>
        </ng-container>
      </cc-name-and-date>
    </mat-card>
  </section>

</form>

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

Вся эта логика работает, нок сожалению, проецируемые ошибки не отображаются должным образом в браузере. Когда происходит ошибка проверки, сообщение отображает внутри элемента управления формы, например:

Это, очевидно, не идеально,и не приемлемо для моего босса! Я бы подумал, что эта проблема была бы решена, так как она кажется достаточно простым шаблоном, но я не могу найти ни одного примера на www с этим шаблоном.

Я проверил DOM в Chrome, и кажется, что <mat-error> находятся в другом месте, когда они проецируются, но я понятия не имею, почему. Кто-нибудь может помочь?