Angular嵌套FormArray能否在HTML正确渲染？现有实现是否最优？

你的当前实现是可行的，但确实可以通过一些调整让代码更清晰、更符合Angular表单的最佳实践：

1. 增加类型安全的Getter方法 #

在组件类中定义Getter，避免模板里使用page['controls']这类非类型安全的写法，同时简化模板逻辑：

// 组件类代码
get pages(): FormArray {
  return this.form.get('pages') as FormArray;
}

get currentPage(): FormArray {
  return this.pages.at(this.paginationIndex) as FormArray;
}

2. 简化模板结构 #

利用上面的Getter，减少不必要的嵌套和重复判断，让模板更直观：

<form [formGroup]="form" (ngSubmit)="onSubmit()">
  <ng-container formArrayName="pages">
    <!-- 直接定位到当前分页的表单数组 -->
    <div [formGroupName]="paginationIndex">
      <ng-container [formArrayName]="paginationIndex">
        <div *ngFor="let itemGroup of currentPage.controls; let i = index" [formGroupName]="i">
          {{ itemGroup.get('name')?.value }}
          <input type="text" formControlName="active">
        </div>
      </ng-container>
    </div>
  </ng-container>

  <div>
    <button class="btn" type="submit">Submit</button>
  </div>
</form>

3. 额外优化点 #

• 如果分页切换频繁，可以在组件中缓存当前分页的表单数组，避免模板渲染时重复调用at()方法
• 对于只读的name字段，更规范的做法是将对应的FormControl设为禁用状态，而非直接读取value：

  <input type="text" formControlName="name" disabled>
  

内容的提问来源于stack exchange，提问作者soni