Angular FormGroup внутри FormArray с использованием нового потока управления

Вам необходимо определить formArrayName = "sections" над циклом for, чтобы было ясно, что элементы управления принадлежат массиву формы.

Затем для первого элемента внутри цикла for нам нужно установить [formGroupName] = "index", чтобы было ясно, что блок кода принадлежит n-му элементу formGroup массива форм:

...
<div cy-data = "session-sections" formArrayName = "sections">
        @for (section of sessionForm.controls.sections.controls;let index = $index; track index) {
          <div [formGroupName] = "index">
          ...

Полный код:

import { Component, ViewChild, ViewEncapsulation } from '@angular/core';
import { FormGroup, FormControl } from '@angular/forms';
import { TextBoxComponent } from '@progress/kendo-angular-inputs';
import { FormArray, ReactiveFormsModule, Validators } from '@angular/forms';

@Component({
  selector: 'my-app',
  template: `
  <pre>{{sessionForm.value | json}}</pre>
        <form [formGroup] = "sessionForm" class = "k-form k-form-md">
    <fieldset class = "k-form-fieldset">

     <!--  other form controls ........ -->
      <div cy-data = "session-sections" formArrayName = "sections">
        @for (section of sessionForm.controls.sections.controls;let index = $index; track index) {
          <div [formGroupName] = "index">
            <kendo-formfield cy-data = "section-title">
              <kendo-label [for] = "sectiontitle" text = "Section Title"></kendo-label>
              <kendo-textbox
                #sectiontitle
                class = "text-input"
                formControlName = "title"
                [clearButton] = "true"
                required
              ></kendo-textbox>
              <kendo-formerror>Error:Section Title Required</kendo-formerror>
            </kendo-formfield>
            <kendo-formfield cy-data = "section-subtitle">
              <kendo-label [for] = "sectionsubtitle" text = "Section Sub Title"></kendo-label>
              <kendo-textbox
                #sectionsubtitle
                class = "text-input"
                formControlName = "subTitle"
                [clearButton] = "true"
                required
              ></kendo-textbox>
              <kendo-formerror>Error:Section Sub Title Required</kendo-formerror>
            </kendo-formfield>
            <kendo-formfield cy-data = "section-description">
              <kendo-label [for] = "sectiondescription" text = "Section Description"></kendo-label>
              <kendo-textarea
                #sectiondescription
                class = "text-input"
                formControlName = "description"
                required
              ></kendo-textarea>
              <kendo-formerror>Error:Section Description Required</kendo-formerror>
            </kendo-formfield>
          </div>
        }
      </div>

    </fieldset>
    </form>
    `,
  encapsulation: ViewEncapsulation.None,
  styleUrls: ['./styles.css'],
})
export class AppComponent {
  sectionForm = new FormGroup({
    title: new FormControl<string>('New Section', {
      nonNullable: true,
      validators: [Validators.required],
    }),
    subTitle: new FormControl<string>('section sub title', {
      nonNullable: true,
    }),
    description: new FormControl<string>('description', { nonNullable: true }),
  });

  sessionForm = new FormGroup({
    title: new FormControl<string>('', {
      nonNullable: true,
      validators: [Validators.required],
    }),
    subTitle: new FormControl<string>('', {
      nonNullable: true,
      validators: [Validators.required],
    }),
    description: new FormControl<string>('', {
      nonNullable: true,
      validators: [Validators.required],
    }),
    sections: new FormArray([this.sectionForm]),
  });
}

Демо-версия Stackblitz