Angular响应式表单复选框绑定及值传递问题求助

问题根源 #

1. 单个FormControl无法处理多选复选框场景，默认仅返回布尔值而非选中的subService_id
2. onCheckChange方法错误过滤了subServiceList，导致选中后子服务列表被覆盖
3. 未正确收集选中的子服务ID数组，POST请求时无法携带对应数据

修复步骤 #

1. 调整表单结构，改用FormArray存储选中的子服务ID #

在组件类中初始化表单时，将subService改为FormArray来支持多选数据存储：

import { FormBuilder, FormGroup, FormArray } from '@angular/forms';

// 组件类内部代码
testServiceForm: FormGroup;

constructor(private fb: FormBuilder) {
  this.testServiceForm = this.fb.group({
    // 保留其他原有表单控件
    subService: this.fb.array([]) // 用FormArray存储多选的subService_id
  });
}

// 封装获取FormArray的快捷方法
get subServiceArray(): FormArray {
  return this.testServiceForm.get('subService') as FormArray;
}

2. 修改HTML模板，修正复选框绑定逻辑 #

移除无效语法，给每个复选框设置唯一ID，并绑定FormArray的选中状态：

<!-- For SubServices checkboxes -->
<div class="d-flex flex-row align-items-center mb-4">
  <i class="fa fa-lock fa-lg me-3 fa-fw"></i>
  <div class="form-outline flex-fill mb-0">
    <div class="form-check form-check-inline" *ngFor="let sub of subServiceList">
      <input 
        class="form-check-input" 
        type="checkbox" 
        id="flexCheck-{{sub.subService_id}}" 
        [value]="sub.subService_id"
        [checked]="subServiceArray.value.includes(sub.subService_id)"
        (change)="onCheckChange($event, sub.subService_id)"
      >
      <label class="form-check-label" for="flexCheck-{{sub.subService_id}}">
        {{sub.subService_name}}
      </label>
    </div>
  </div>
</div>

3. 修复onCheckChange方法，正确维护选中的子服务ID #

修改方法逻辑，实现选中时添加ID、取消时移除ID的功能：

onCheckChange(event: any, subServiceId: number) {
  const isChecked = event.target.checked;
  if (isChecked) {
    // 选中时将ID加入FormArray
    this.subServiceArray.push(this.fb.control(subServiceId));
  } else {
    // 取消时从FormArray移除对应ID
    const targetIndex = this.subServiceArray.value.indexOf(subServiceId);
    if (targetIndex !== -1) {
      this.subServiceArray.removeAt(targetIndex);
    }
  }
}

4. 修正changeService方法的拼写错误与逻辑补充 #

修复大小写错误，并添加切换服务时清空选中状态的逻辑：

changeService(event: any) {
  let serviceId = event.target.value;
  this.subServiceList = this.testService.getSubService().filter((u) => u.service_id == serviceId);
  console.log(this.subServiceList); // 修正大小写错误
  // 切换服务时清空之前选中的子服务
  this.subServiceArray.clear();
}

5. 提交时获取完整数据 #

提交表单时，testServiceForm.value会自动包含subService数组，直接用于POST请求即可：

submitForm() {
  const formData = this.testServiceForm.value;
  // 发送POST请求到JSON Server
  this.http.post('http://你的JSON-Server地址/test-services', formData)
    .subscribe(response => {
      console.log('提交成功', response);
    });
}

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