Angular循环中实现类似HTML同名数组textarea的表单数据收集问题求助

嘿，这个问题其实很常见，你之前的思路有点偏差，FormArray恰恰是解决这个场景的最佳方案！让我一步步给你捋清楚：

问题根源分析 #

你现在的代码里，所有<textarea>都绑定了同一个表单控件和同一个remarks变量，相当于所有输入框共享同一个数据源——这就是为什么改一个输入框，其他所有都会同步变化的原因。而你想要的类似HTML中name="fleaveRemark[]"批量收集值的功能，正好对应Angular响应式表单里的FormArray。

解决方案步骤 #

1. 重构组件中的表单初始化逻辑

把原来的单个FormControl改成FormArray，根据selectedLeaves的数量动态生成对应数量的表单控件：

// component.ts
import { FormBuilder, FormGroup, FormArray, Validators } from '@angular/forms';

// 假设你已经注入了FormBuilder：private formBuilder: FormBuilder

remarksFormInit() {
  // 根据selectedLeaves的长度，为每个条目创建一个带必填验证的表单控件
  const remarkControls = this.selectedLeaves.map(() => 
    this.formBuilder.control('', Validators.required)
  );
  
  this.remarksForm = this.formBuilder.group({
    // 用FormArray来存放所有备注控件
    leaveRemarks: this.formBuilder.array(remarkControls)
  });
}

// 给模板提供一个便捷获取FormArray的方法
get leaveRemarks(): FormArray {
  return this.remarksForm.get('leaveRemarks') as FormArray;
}

2. 修改模板，关联FormArray与循环条目

在*ngFor中同时遍历selectedLeaves和FormArray的控件，通过索引绑定对应的表单控件：

<!-- template.html -->
<form [formGroup]="remarksForm">
  <div *ngFor="let selectedLeave of selectedLeaves; let i = index">
    <div class="create-form-container">
      <div class="form-group">
        <label class="control-label required">Remarks for {{selectedLeave.leaveType}}</label>
        <!-- 通过索引绑定FormArray中的对应控件 -->
        <textarea formArrayName="leaveRemarks" [formControlName]="i"></textarea>
      </div>
    </div>
  </div>
  
  <button type="button" (click)="saveRemarks()" [disabled]="!remarksForm.valid">Save</button>
</form>

注意：这里不要再混用ngModel和响应式表单指令了，响应式表单已经能帮你完成数据绑定，避免冲突。

3. 提交时获取所有备注值

点击保存按钮时，直接从FormArray中取出所有值，还可以和selectedLeaves对应起来：

// component.ts
saveRemarks() {
  if (this.remarksForm.valid) {
    // 获取所有备注值，顺序与selectedLeaves完全对应
    const allRemarks = this.leaveRemarks.value;
    
    // 可以把备注和对应的请假条目合并
    const leavesWithRemarks = this.selectedLeaves.map((leave, index) => ({
      ...leave,
      remark: allRemarks[index]
    }));
    
    console.log('所有带备注的请假条目：', leavesWithRemarks);
    // 这里执行你的提交逻辑，比如调用API
  }
}

为什么FormArray适用？ #

FormArray的核心作用就是处理动态数量的表单控件，正好匹配你这种根据selectedLeaves数量动态生成输入框的场景，完全能实现你要的“批量收集每个输入框值”的效果。

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