Angular FormGroup如何提交API动态加载的多复选框选中值并获取数据

问题根因 #

你现有代码的核心错误有3个：

• 同时给md-checkbox绑定了[formControl]和[formControlName]，两个属性作用冲突
• 你声明的servers是普通FormControl，不是FormArray类型，无法通过索引j绑定子表单控件
• 你在HTML里写了formGroupName="systemService"，但FormGroup定义中没有对应的嵌套分组，会触发表单绑定报错

解决方法（新手友好方案，无需改动原有FormGroup结构） #

1. 调整TS代码

保留原有FormGroup定义，新增选中值处理方法：

// 原有表单定义不变
this.systemlogsform = this.fb.group({
  logtype: ['installlogs', Validators.required],
  servers: [[], Validators.required]
});

// 新增：复选框选中状态变更处理方法
onServerCheck(e, fqdn: string) {
  const selectedServers = this.systemlogsform.get('servers').value || [];
  if (e.checked) {
    // 选中则加入数组
    if (!selectedServers.includes(fqdn)) {
      selectedServers.push(fqdn);
    }
  } else {
    // 取消选中则从数组移除
    const index = selectedServers.findIndex(item => item === fqdn);
    if (index > -1) {
      selectedServers.splice(index, 1);
    }
  }
  // 更新表单值
  this.systemlogsform.get('servers').setValue(selectedServers);
}

2. 调整HTML代码

删掉冲突的绑定属性，改成绑定change事件：

<div class="large-12 small-12 medium-12" *ngIf="systemlogsform.value.logtype==='installlogs'">
  <div>
    <label class="col-md-12 md-padding--s md-padding__left--l md-padding__top--s" for=""><strong>
        Select Server Option
      </strong></label>
    <div
      class="col-md-3"
      *ngFor="let node of nodeList; let j=index;"
    >
      <md-checkbox
        style="padding-left:45px;"
        name="TDG"
        label="{{node.FQDN}}"
        htmlId="{{node.HostName}}"
        [value]="node.FQDN"
        (change)="onServerCheck($event, node.FQDN)"
        [checked]="systemlogsform.get('servers').value?.includes(node.FQDN)"
      >
      </md-checkbox>
    </div>
  </div>
</div>

问题对应答案 #

1. 提交时直接取this.systemlogsform.value.servers就能拿到所有选中的服务器FQDN数组，直接传给后端接口即可。
2. 按上述方法修改完冲突的表单绑定后，就能正常获取选中值，原有表单验证规则也会正常生效：至少选中一个服务器才会通过验证。

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