Angular 嵌套formArrays的HTML迭代

是的，我们可以，我们应该创建两个formArrayName一个为pages，另一个为嵌套的表单数组名称索引，除此之外，我使用了一些函数来设置HTML中的元素的类型，这不是推断的，请参考下面的工作示例，让我知道如果有任何疑问！

我不认为在ng-container个元素上使用formArrayName，formGroupName等是个好主意，而是go 一个普通的DIV，因为元素不会在HTML中生成，我可能错了，只是一个建议！

当使用表单时，你想隐藏一些字段，总是go [hidden]隐藏元素，销毁元素可能会给你带来问题！

import { CommonModule } from '@angular/common';
import { Component, inject } from '@angular/core';
import {
  ReactiveFormsModule,
  FormGroup,
  FormBuilder,
  FormsModule,
  FormArray,
} from '@angular/forms';
import { bootstrapApplication } from '@angular/platform-browser';
import 'zone.js';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [FormsModule, ReactiveFormsModule, CommonModule],
  template: `
    <form [formGroup]="form" (ngSubmit)="onSubmit()">
        <div formArrayName="pages">
          <div *ngFor="let page of pages.controls; let i = index" [formArrayName]="i">
            <div [hidden]="i !== paginationIndex">
              <div *ngFor="let myControl of setType(page).controls; let i = index" [formGroupName]="i">
                {{myControl.get('name')?.value }}
                <input type="text" formControlName="active">
              </div>
            </div>
          </div>
        </div>
        <div>
          <button class="btn" type="submit">Submit</button>
        </div>
    </form>
  `,
})
export class App {
  paginationIndex = 0;
  name = 'Angular';
  formBuilder = inject(FormBuilder);
  form: FormGroup = new FormGroup({});

  get pages() {
    return this.form.get('pages') as FormArray;
  }

  setType(page: any) {
    return page as FormArray;
  }

  ngOnInit() {
    this.form = this.formBuilder.group({
      pages: this.formBuilder.array([
        this.formBuilder.array([
          this.formBuilder.group({
            active: true,
          }),
          this.formBuilder.group({
            active: false,
          }),
        ]),
        this.formBuilder.array([
          this.formBuilder.group({
            active: true,
          }),
          this.formBuilder.group({
            active: false,
          }),
        ]),
      ]),
    });
  }

  onSubmit() {}
}

bootstrapApplication(App);

Stackblitz Demo