Angular中如何用*ngFor遍历两个FormArray并保持字段成对？

嘿，我来帮你搞定这个Angular表单的问题！你现在遇到的核心问题是：分开循环两个FormArray会让所有标题和内容各自扎堆，没法实现Titulo/Conteúdo成对排列的效果；而尝试合并循环时又因为表单控件路径绑定错误导致报错。下面给你两种可行的解决方案，你可以根据自己的需求选择：

方案一：基于现有双FormArray结构的快速修复 #

既然你每次调用addAlternativeField()都会同时给两个FormArray添加控件，那它们的长度肯定是一致的。我们可以循环其中一个FormArray的索引，然后分别获取两个数组中对应位置的控件，直接绑定到输入框上，这样就能实现成对展示了。

模板代码修改： #

<!-- 循环其中一个FormArray的控件，用_占位符表示不需要用到当前控件变量 -->
<div *ngFor="let _ of alternativeFields.controls; let i = index" class="field-pair">
  <!-- Titulo输入框：直接绑定alternativeFields的第i个控件 -->
  <mat-form-field appearance="standard" class="fullSize">
    <mat-label>Titulo</mat-label>
    <input 
      [formControl]="alternativeFields.at(i)" 
      type="text" 
      matInput 
      id="field_{{i}}" 
      autocomplete="off" 
      placeholder="Titulo">
  </mat-form-field>

  <!-- Conteúdo输入框：直接绑定alternativeFieldsValues的第i个控件 -->
  <mat-form-field appearance="standard" class="fullSize">
    <mat-label>Conteúdo</mat-label>
    <input 
      [formControl]="alternativeFieldsValues.at(i)" 
      type="text" 
      matInput 
      id="value_{{i}}" 
      autocomplete="off" 
      placeholder="Conteúdo deste campo">
  </mat-form-field>
</div>

修正组件中的add/remove方法（确保两个数组同步）： #

addAlternativeField() {
  this.alternativeFields.push(this.fbuilder.control(''));
  // 别忘了同步给另一个数组添加控件
  this.alternativeFieldsValues.push(this.fbuilder.control(''));
}

removeAlternativeField(index: number) {
  this.alternativeFields.removeAt(index);
  // 删除时也要同步删除另一个数组对应位置的控件
  this.alternativeFieldsValues.removeAt(index);
}

为什么这样能行？
我们不再依赖formArrayName和formControlName的嵌套绑定，而是直接通过[formControl]把输入框和对应的FormControl实例绑定起来。这样就能自由控制Titulo和Conteúdo的排版，让它们成对出现。

方案二：重构表单结构（更推荐的长期方案） #

其实从语义上来说，每个Titulo和Conteúdo是一组关联的数据，把它们放到两个独立的FormArray里并不是最合理的结构。更好的做法是创建一个包含title和content的FormGroup，然后把这些FormGroup放到单个FormArray中。这种结构更清晰，也更符合Angular表单的设计理念。

组件中重构表单定义： #

// 首先修改表单的结构，用单个FormArray存储成对的控件组
this.form = this.fbuilder.group({
  index: [''],
  id: [''],
  name: ['', Validators.required],
  value: ['', Validators.required],
  title: ['', Validators.required],
  description: [''],
  // 替换原来的两个数组为单个alternativePairs数组
  alternativePairs: this.fbuilder.array([])
});

// 辅助getter方法，获取这个FormArray
get alternativePairs() { return this.form.get('alternativePairs') as FormArray; }

// 创建单个成对控件组的方法
private createAlternativePair(): FormGroup {
  return this.fbuilder.group({
    title: [''], // 对应Titulo输入框
    content: [''] // 对应Conteúdo输入框
  });
}

// 添加成对字段的方法
addAlternativeField() {
  this.alternativePairs.push(this.createAlternativePair());
}

// 删除成对字段的方法
removeAlternativeField(index: number) {
  this.alternativePairs.removeAt(index);
}

模板代码修改： #

<!-- 绑定FormArray的名称 -->
<div formArrayName="alternativePairs" *ngFor="let pair of alternativePairs.controls; let i = index">
  <!-- 绑定当前索引对应的FormGroup -->
  <div [formGroupName]="i" class="field-pair">
    <!-- 使用formControlName绑定FormGroup中的title控件 -->
    <mat-form-field appearance="standard" class="fullSize">
      <mat-label>Titulo</mat-label>
      <input 
        formControlName="title" 
        type="text" 
        matInput 
        id="field_{{i}}" 
        autocomplete="off" 
        placeholder="Titulo">
    </mat-form-field>

    <!-- 使用formControlName绑定FormGroup中的content控件 -->
    <mat-form-field appearance="standard" class="fullSize">
      <mat-label>Conteúdo</mat-label>
      <input 
        formControlName="content" 
        type="text" 
        matInput 
        id="value_{{i}}" 
        autocomplete="off" 
        placeholder="Conteúdo deste campo">
    </mat-form-field>
  </div>
</div>

为什么推荐这个方案？
这种结构让表单数据的逻辑更清晰，提交表单时你会得到一个包含所有成对数据的数组（比如alternativePairs: [{title: 'xxx', content: 'yyy'}, ...]），后续处理数据也更方便。同时，这种写法完全符合Angular表单的规范，不容易出现路径绑定错误。

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