嵌套 formArrays 的 HTML 迭代

Question

是否可以将一个 formArray 嵌套在其他 formArray 中并在 HTML 视图中正确显示？

我正在基于 API 响应构建分页表单，因此我正在迭代我的响应来创建此表单，所以我最终会得到类似的内容：

this.form = this.formBuilder.group({ pages : this.formBuilder.array([ this.formBuilder.array([]) ]) });

所以我的表格看起来像：

-> this.form = FormGroup (controls)
   -> pages = FormArray (controls)
      -> 0 = FormArray (controls)
        -> 0 = FormGroup (controls)
           -> Name (my form fields)
           -> Active (my form fields)

所以在 DOM 中迭代它对我来说很奇怪，我想知道是否有更好的方法来实现这一点，或者这是否确实是正确的方法

 <form [formGroup]="form" (ngSubmit)="onSubmit()">
     <ng-container formArrayName="pages">
       <ng-container *ngFor="let page of pages.controls; let i = index">
         <div *ngIf="i === paginationIndex" [formGroupName]="i">
           <div *ngFor="let myControl of page['controls']; let i = index" [formGroupName]="i">
             {{myControl.get('name')?.value }}
             <input type="text" formControlName="active">
           </div>
         </div>
       </ng-container>
     </ng-container>
     <div>
       <button class="btn" type="submit">Submit</button>
     </div>
</form>

Answer 1

是的，我们可以，我们应该创建两个

formArrayName

，一个用于

pages

，另一个带有嵌套表单数组名称索引，除此之外，我使用了一些函数来设置HTML中元素的类型，这些函数没有推断出来，请参考下面的工作示例，如有疑问请告诉我！

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 演示