Angular中如何将选中礼品的字符串数组存入FormArray

一、完善现有提交逻辑 #

你已经成功筛选出了选中的礼品名称数组giftsArr，只需补充将其填充到FormArray的逻辑即可，修改onSubmit方法如下：

onSubmit() {
  // 用map简化筛选逻辑，直接提取选中礼品的名称
  const giftsArr = this.gifts
    .filter(gift => gift.isClick)
    .map(gift => gift.text);

  // 获取gifts对应的FormArray引用
  const giftsFormArray = this.signupForm.get('gifts') as FormArray;
  // 清空原有内容，避免重复提交时积累旧数据
  giftsFormArray.clear();
  // 遍历选中的礼品名称，逐个创建FormControl并添加到FormArray中
  giftsArr.forEach(giftName => {
    giftsFormArray.push(new FormControl(giftName));
  });

  // 此时this.signupForm.value中的gifts字段就是选中的礼品名称数组，可直接用于提交
  console.log(this.signupForm.value);
}

二、符合Angular表单规范的优化方案 #

手动维护gifts数组的isClick状态容易出现视图与数据不同步的问题，推荐直接通过响应式表单绑定复选框，无需额外维护状态：

1. 初始化FormArray #

修改ngOnInit，根据礼品数组为每个选项创建对应的FormControl：

ngOnInit() {
  // 为每个礼品生成一个初始值为false（未勾选）的FormControl
  const giftControls = this.gifts.map(() => new FormControl(false));
  this.signupForm = new FormGroup({
    gifts: new FormArray(giftControls)
  });
}

2. 模板绑定复选框 #

在HTML模板中遍历礼品数组，将每个复选框与FormArray的对应控件绑定：

<form [formGroup]="signupForm" (ngSubmit)="onSubmit()">
  <div formArrayName="gifts">
    <div *ngFor="let gift of gifts; let i = index">
      <label>
        <input 
          type="checkbox" 
          [formControlName]="i"
        >
        {{ gift.text }}
      </label>
    </div>
  </div>
  <button type="submit">提交</button>
</form>

3. 提交时提取选中礼品 #

此时无需依赖gifts数组的isClick字段，直接通过表单状态筛选选中的礼品：

onSubmit() {
  // 获取所有复选框的勾选状态数组，例如[true, false, true]
  const checkedStatuses = (this.signupForm.get('gifts') as FormArray).value;
  // 筛选并提取选中的礼品名称
  const selectedGifts = this.gifts
    .filter((_, index) => checkedStatuses[index])
    .map(gift => gift.text);

  // 若需要将选中名称存入FormArray供提交，替换原FormArray内容
  const giftsFormArray = this.signupForm.get('gifts') as FormArray;
  giftsFormArray.clear();
  selectedGifts.forEach(name => giftsFormArray.push(new FormControl(name)));

  console.log(this.signupForm.value);
}

这种方式让表单状态与视图自动同步，更符合Angular响应式表单的设计逻辑。

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