Как создать массив форм в формате дерева в angular14?

Всегда у нас есть "бесконечный уровень" - это работа над "рекурсивным компонентом"

Рекурсивный компонент — это только компонент, который вызывает сам себя (см., например, это ТАК)

Управлять дочерним компонентом, который управляет formGroup от родителя, не очень просто. Мы можем использовать viewProviders или передать FormGroup во входных данных (см. это еще один SO)

Мы собираемся выбрать передать formGroup. Но поскольку наш компонент является рекурсивным компонентом, который нам нужен в группе форм, поэтому я использую другой ввод, который является «именем» группы форм. (помните, что наши formArrays — это formArrays formGroups. Нам нужно «достучаться» до formGroup

Пух...!

Прежде чем мы собираемся определить функцию для создания formGroup. Мы экспортируем его, потому что одна и та же функция может использоваться родителем и компонентом.

export function setNestedMenu(data:any=null){
  data=data || {name: "",displayname: "",id: "",nestedMenu: []}
  return new FormGroup({
      name:new FormControl(data.name),
      displayName:new FormControl(data.name),
      id:new FormControl(data.name),
      nestedMenu:new FormArray(data.nestedMenu.map((x:any)=>this.setNestedMenu(x)))
  })
}

ПРИМЕЧАНИЕ. Я использую camelCase, чтобы придать значение «свойствам».

Компонент

@Component({
  selector: 'form-component',
  standalone: true,
  imports: [CommonModule, FormsModule, ReactiveFormsModule],
  template: `
  <div [style.margin-left.px] = "index*10" *ngIf = "formGroup" [formGroup] = "formGroup" >
  <div formArrayName = "nestedMenu">
     <button (click) = "addMenu()">add</button>
     <div *ngFor = "let group of menuArray?.controls;let i=index" 
                                          [formGroupName] = "i">
       <input formControlName = "id"/>
       <input formControlName = "name"/>
       <input formControlName = "displayName"/>
       <button (click) = "removeMenu(i)">remove</button>
       <button (click) = "addSubMenu(i)">add submenu</button>
       <ng-container *ngIf = "getSubMenuArray(i).length">
         <!--here we call again to our component-->
          <form-component [form] = "form" 
                          [name] = "name+'.'+i+'.nestedMenu'" 
                          [index] = "index+1" ></form-component>
       </ng-container>
     </div>
  </div>
  </div>`,
})
export class FormMenuComponent  {
  _index:number=0;
  formGroup:FormGroup
  @Input() form: FormGroup;
  @Input() name:string = "nestedMenu";
  @Input('index') set _(value:number){
    this._index=value;
    this.formGroup=(value?this.form.get(this.name).parent:this.form) as FormGroup
  }

  get index()
  {
    return this._index
  }
  get menuArray() {
    return this.form?this.form.get(this.name) as FormArray:null;
  }
  getSubMenuArray(index:number){
    
    return this.form.get(this.name+'.'+index+'.nestedMenu') as FormArray
  }
  
 addMenu()
 {
   this.menuArray.push(setNestedMenu())
 }
 addSubMenu(index:number)
 {
   this.getSubMenuArray(index).push(setNestedMenu())
 }
 removeMenu(index:number)
 {
  this.menuArray.removeAt(index)
 }
}

Посмотрите, как передать имя, форму и индексные переменные

Наш main.component просто

<form-component [form] = "form" [index] = "0"></form-component>

form: FormGroup=new FormGroup({
    nestedMenu:new FormArray([setNestedMenu()])
  })

Смотрите stackblitz

ПРИМЕЧАНИЕ: извините за самоцитирование

Перед ответом передать в форму две переменные: «форма» и «имя» formArray. Это усложняет компонент. Есть еще один лучший подход, который передает "formGroup".

Во-первых, наш компонент имеет ввод «установщика», например

  formGroup:FormGroup
  @Input('form') set __(value:AbstractControl){
    this.formGroup=value as FormGroup
  }

(Необходимо "отлить" управление)

Теперь мы можем использовать что-то вроде

<div *ngIf = "formGroup" [formGroup] = "formgroup">
  ...
  <div formArrayName = "nestedMenu">
     <div *ngFor = "let group of nestedMenuArray?.controls;let i=index"
                [formGroupName] = "i">
        ...
        <ng-container *ngIf = "getNestedMenuArray(i)?.length">
          <!--see we pass as form the "formGroup"-->
          <form-component [form] = "nestedMenuArray.at(i)"  [index] = "index+1" >
          </form-component>
        </ng-container>
     </div>
  </div>

  get nestedMenuArray() {
     return this.formGroup?this.formGroup.get('nestedMenu') as FormArray:null;
  }

  getNestedMenuArray(index:number){
    return  this.nestedMenuArray?this.nestedMenuArray.at(index) as FormArray:null
  }

стекблиц