Angular 5响应式表单：将复选框ID传入FormArray

我来帮你搞定这个需求！你需要遍历外部的sites数组生成复选框，同时把选中的站点ID存入FormArray对吧？下面是两种常用的实现方案，你可以根据实际需求选择：

方案一：FormArray仅存储选中的站点ID #

这种方式下，FormArray里只会保留你选中的那些站点ID，适合只需要收集选中结果的场景。

组件TypeScript代码 #

import { Component, OnInit } from '@angular/core';
import { FormGroup, FormBuilder, FormArray, Validators } from '@angular/forms';

export class AppComponent implements OnInit {
  form: FormGroup;
  sites = ["site-1", "site-2", "site-3", "site-4"];

  constructor(private fb: FormBuilder) {}

  ngOnInit() {
    this.form = this.fb.group({
      type: ['', Validators.required],
      // 初始化空的FormArray，用来存放选中的站点ID
      sites: this.fb.array([])
    });
  }

  // 定义getter，简化模板中对FormArray的访问
  get sitesArray(): FormArray {
    return this.form.get('sites') as FormArray;
  }

  // 处理复选框选中/取消的逻辑
  onSiteSelectionChange(site: string, isChecked: boolean) {
    if (isChecked) {
      // 选中时把站点ID加入FormArray
      this.sitesArray.push(this.fb.control(site));
    } else {
      // 取消选中时从FormArray移除对应ID
      const targetIndex = this.sitesArray.controls.findIndex(control => control.value === site);
      if (targetIndex !== -1) {
        this.sitesArray.removeAt(targetIndex);
      }
    }
  }

  // 表单提交示例方法
  onSubmit() {
    if (this.form.valid) {
      console.log('提交的表单数据:', this.form.value);
      // 这里的form.value.sites就是选中的所有站点ID数组
    }
  }
}

模板HTML代码 #

<form [formGroup]="form" (ngSubmit)="onSubmit()">
  <!-- 类型输入框 -->
  <div class="form-group">
    <label for="type">类型:</label>
    <input type="text" id="type" formControlName="type" class="form-control">
    <div *ngIf="form.get('type')?.invalid && form.get('type')?.touched" class="text-danger">
      类型为必填项
    </div>
  </div>

  <!-- 站点复选框列表 -->
  <div formArrayName="sites" class="mt-3">
    <h4>选择站点:</h4>
    <div *ngFor="let site of sites; let i = index" class="form-check">
      <label class="form-check-label">
        <input 
          type="checkbox" 
          class="form-check-input"
          [value]="site"
          (change)="onSiteSelectionChange(site, $event.target.checked)"
          <!-- 回显选中状态：判断当前站点是否已在FormArray中 -->
          [checked]="sitesArray.controls.some(control => control.value === site)"
        >
        {{ site }}
      </label>
    </div>
  </div>

  <button type="submit" class="btn btn-primary mt-3" [disabled]="form.invalid">提交表单</button>
</form>

方案二：FormArray存储每个复选框的选中状态 #

如果需要跟踪每个站点的选中状态（而不只是收集选中的ID），可以用这种方式：FormArray的每个元素对应一个站点的选中状态（布尔值）。

组件TypeScript代码 #

import { Component, OnInit } from '@angular/core';
import { FormGroup, FormBuilder, FormArray, Validators } from '@angular/forms';

export class AppComponent implements OnInit {
  form: FormGroup;
  sites = ["site-1", "site-2", "site-3", "site-4"];

  constructor(private fb: FormBuilder) {}

  ngOnInit() {
    // 根据sites数组生成对应的FormControl，初始值为false（未选中）
    const siteControls = this.sites.map(() => this.fb.control(false));
    this.form = this.fb.group({
      type: ['', Validators.required],
      sites: this.fb.array(siteControls)
    });
  }

  get sitesArray(): FormArray {
    return this.form.get('sites') as FormArray;
  }

  // 获取选中的站点ID数组
  getSelectedSites(): string[] {
    return this.sites.filter((_, index) => this.sitesArray.controls[index].value);
  }

  onSubmit() {
    if (this.form.valid) {
      console.log('选中的站点ID:', this.getSelectedSites());
      console.log('完整表单值:', this.form.value);
      // form.value.sites是布尔值数组，对应每个站点的选中状态
    }
  }
}

模板HTML代码 #

<form [formGroup]="form" (ngSubmit)="onSubmit()">
  <div class="form-group">
    <label for="type">类型:</label>
    <input type="text" id="type" formControlName="type" class="form-control">
    <div *ngIf="form.get('type')?.invalid && form.get('type')?.touched" class="text-danger">
      类型为必填项
    </div>
  </div>

  <div formArrayName="sites" class="mt-3">
    <h4>选择站点:</h4>
    <div *ngFor="let control of sitesArray.controls; let i = index" class="form-check">
      <label class="form-check-label">
        <input type="checkbox" class="form-check-input" [formControlName]="i">
        {{ sites[i] }}
      </label>
    </div>
  </div>

  <button type="submit" class="btn btn-primary mt-3" [disabled]="form.invalid">提交表单</button>
</form>

关键知识点说明 #

• Getter方法sitesArray：用来简化模板中对FormArray的访问，避免重复编写类型转换代码。
• FormArray的操作：使用push()添加元素，removeAt()删除元素，确保FormArray的内容和复选框选中状态同步。
• 状态回显：方案一中通过[checked]属性判断站点是否已在FormArray中，确保刷新或编辑时状态正确；方案二则直接通过formControlName绑定，Angular会自动处理状态回显。

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