Что делает использование партиалов невозможным в этом приложении Angular 14?

Я работаю над группой вложенных форм в Angular 14.

Существуют элементы управления формами, общие для нескольких форм, поэтому я добавил их частично.

В form.component.ts у меня есть:

import { Component } from '@angular/core';
import { FormGroup, FormControl, Validators, FormArray } from '@angular/forms';

@Component({
  selector: 'my-app',
  templateUrl: './form.component.html',
  styleUrls: ['./form.component.css'],
})
export class FormComponent {
  public form: FormGroup = new FormGroup({
    first_name: new FormControl('', Validators.required),
    last_name: new FormControl('', Validators.required),
    email: new FormControl('', [Validators.required, Validators.email]),
    phone: new FormControl('', Validators.required),
  });

  constructor() {}

  ngOnInit(): void {}

  public sendFormData() {
    console.info(this.form.value);
  }
}

В form.component.html я включаю частичное <app-additional></app-additional>:

<form [formGroup] = "form">
  <mat-form-field appearance = "outline" floatLabel = "always">
    <mat-label class = "mat-label">Fast name:</mat-label>
    <input class = "mat-input" matInput formControlName = "first_name" />
  </mat-form-field>

  <mat-form-field appearance = "outline" floatLabel = "always">
    <mat-label class = "mat-label">Last name:</mat-label>
    <input class = "mat-input" matInput formControlName = "last_name" />
  </mat-form-field>

  <app-additional></app-additional>

  <div class = "center">
    <button
      (click) = "sendFormData()"
      mat-raised-button
      color = "primary"
      [disabled] = "!form.valid"
    >
      Submit
    </button>
  </div>
</form>

Смотрите Stackblitz ЗДЕСЬ.

Проблема

Вместо рендеринга партиала приложение выдает ошибку:

Error: formControlName must be used with a parent formGroup directive.

Вопросы:

1. Что вызывает эту проблему?
2. Каков самый надежный способ исправить это?