Пользовательский общий компонент ввода — ошибки проверки не работают должным образом

Я пытаюсь написать общий компонент ввода для Material Angular, поэтому мне не нужно дублировать 20 строк HTML-кода для каждого отдельного поля. Но у меня возникли проблемы с получением mat-error для отображения сообщения проверки.

Итак, это код, который у меня был в MyFormComponent:

<div class="form-group">

  <mat-form-field appearance="fill" hintLabel="Max 10 characters">
  
    <mat-label> Name Old (works) </mat-label>
    
    <input matInput type="text" formControlName="nameOld" />

    <mat-hint align="end">the/10</mat-hint>

    <mat-error *ngIf=" (formModal.get('nameOld').dirty || formModal.get('nameOld').touched) &&
        formModal.get('nameOld').errors && formModal.get('nameOld').errors['required'] ">
      Name Old is required.
    </mat-error>
      
  </mat-form-field>
  
</div>

Теперь я переместил это в пользовательский компонент CommonInputComponent следующим образом:

HTML:

<div class="form-group">
  <mat-form-field appearance="fill" hintLabel="Max 10 characters">
    <mat-label>{{ fieldInfo.label }}</mat-label>
    <input
      matInput
      [type]="fieldInfo.type"
      [placeholder]="fieldInfo.placeholder"
      [value]="value"
      (input)="onChange($event.target.value)"
      (blur)="onTouched()"
    />

    <mat-hint align="end">{{ ngControl.value?.length || 0 }}/10</mat-hint>

    <mat-error
      *ngIf="
        (ngControl.dirty || ngControl.touched) &&
        ngControl.errors &&
        ngControl.errors['required']
      "
      >Name is required.</mat-error
    >
  </mat-form-field>

  <pre>{{ ngControl.errors | json }}</pre>
  <pre>{{ { dirty: ngControl.dirty, touched: ngControl.touched } | json }}</pre>
</div>

а затем я пытаюсь использовать его в своей форме MyFormComponent как:

<app-common-input
  formControlName="name"
  [fieldInfo]="{ label: 'name', name: 'name', type: 'text' }"
></app-common-input>

Все привязки работают нормально, свойства обновляются как в родительском, так и в дочернем компонентах, но единственная проблема, с которой я столкнулся, заключается в том, что mat-error не работает, как в предыдущем примере.

Я ожидаю, что в обоих полях ниже должно отображаться «Требуется имя». сообщение об ошибке для обоих полей, когда ввод пуст. Но я вижу это только для второго поля (которое не использует мой общий компонент).

Я создал рабочий пример в StackBlitz (https://stackblitz.com/edit/add-angular-material-yph1vt?file=src/app/app.component.ts)