Angular 4模板驱动表单中动态复选框的值提交问题求助

嘿，我来帮你搞定这个动态复选框的提交问题！你的核心问题在于没有正确使用Angular的表单绑定机制，而且复选框的name属性存在重复，导致表单无法追踪选中状态。下面分两种方案给你解决：

方案一：模板驱动表单（适合新手，快速上手） #

1. 修正组件类代码 #

首先确保你的chekboxArray是组件的类属性，而不是局部变量：

import { Component } from '@angular/core';
import { NgForm } from '@angular/forms';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html'
})
export class YourComponentComponent {
  // 把数组定义为类属性，这样模板能访问到
  chekboxArray = [
    { section:'Programming Skills', choices:[ { name:'C', value:'c' }, { name:'C++', value:'c++' }, { name:'Java', value:'java' } ] },
    { section:'Interest', choices:[ { name:'Movies', value:'movies' }, { name:'Tv Series', value:'tvseries' }, { name:'Football', value:'football' } ] }
  ];

  addToCart(form: NgForm){
    // 现在form.value会包含所有选中的复选框值
    console.log('提交的表单值:', form.value);
    // 你可以筛选出选中的选项，比如：
    const selectedOptions = Object.entries(form.value)
      .filter(([key, value]) => value)
      .map(([key, value]) => value);
    console.log('选中的选项:', selectedOptions);
  }
}

2. 修正模板代码 #

给复选框添加ngModel绑定，并且设置唯一的name属性（避免不同section下的复选框name重复）：

<form #customChoiceform="ngForm" (ngSubmit)="addToCart(customChoiceform);">
  <div *ngFor="let single of chekboxArray">
    <label>{{ single.section }}</label>
    <div *ngFor="let choice of single.choices">
      <label>{{ choice.name }}</label>
      <!-- 使用ngModel绑定，name用section+value保证唯一 -->
      <input type="checkbox" 
             [value]="choice.value" 
             name="{{single.section}}-{{choice.value}}" 
             ngModel />
    </div>
  </div>
  <div>
    <button type="submit">Submit</button>
  </div>
</form>

3. 别忘了导入FormsModule #

在你的模块（比如AppModule）里导入FormsModule，模板驱动表单才能生效：

import { FormsModule } from '@angular/forms';

@NgModule({
  imports: [
    // ...其他模块（比如BrowserModule）
    FormsModule
  ]
})
export class AppModule { }

方案二：响应式表单（适合复杂场景，更灵活） #

如果你的表单后续会更复杂，推荐用响应式表单来管理，它能更好地控制表单状态：

1. 组件类代码 #

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

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html'
})
export class YourComponentComponent implements OnInit {
  customForm: FormGroup;
  chekboxArray = [
    { section:'Programming Skills', choices:[ { name:'C', value:'c' }, { name:'C++', value:'c++' }, { name:'Java', value:'java' } ] },
    { section:'Interest', choices:[ { name:'Movies', value:'movies' }, { name:'Tv Series', value:'tvseries' }, { name:'Football', value:'football' } ] }
  ];

  constructor(private fb: FormBuilder) { }

  ngOnInit(): void {
    // 初始化表单结构
    this.customForm = this.fb.group({
      sections: this.fb.array(
        this.chekboxArray.map(section => 
          this.fb.group({
            sectionName: section.section,
            choices: this.fb.array(
              section.choices.map(choice => 
                this.fb.group({
                  name: choice.name,
                  value: choice.value,
                  checked: false // 绑定复选框的选中状态
                })
              )
            )
          })
        )
      )
    });
  }

  // 获取sections表单数组
  get sections(): FormArray {
    return this.customForm.get('sections') as FormArray;
  }

  // 获取指定section下的choices表单数组
  getChoices(sectionIndex: number): FormArray {
    return this.sections.at(sectionIndex).get('choices') as FormArray;
  }

  addToCart() {
    // 提取所有选中的选项
    const selectedChoices = [];
    this.sections.controls.forEach(sectionGroup => {
      const sectionName = sectionGroup.get('sectionName').value;
      const selected = (sectionGroup.get('choices') as FormArray).controls
        .filter(choiceGroup => choiceGroup.get('checked').value)
        .map(choiceGroup => choiceGroup.get('value').value);
      
      if (selected.length > 0) {
        selectedChoices.push({ section: sectionName, selectedOptions: selected });
      }
    });
    console.log('选中的选项:', selectedChoices);
  }
}

2. 模板代码 #

<form [formGroup]="customForm" (ngSubmit)="addToCart()">
  <div formArrayName="sections" *ngFor="let section of sections.controls; let sectionIndex = index">
    <div [formGroupName]="sectionIndex">
      <label>{{ section.get('sectionName').value }}</label>
      <div formArrayName="choices" *ngFor="let choice of getChoices(sectionIndex).controls; let choiceIndex = index">
        <div [formGroupName]="choiceIndex">
          <label>{{ choice.get('name').value }}</label>
          <input type="checkbox" formControlName="checked" />
        </div>
      </div>
    </div>
  </div>
  <div>
    <button type="submit">Submit</button>
  </div>
</form>

3. 导入ReactiveFormsModule #

在模块里导入ReactiveFormsModule：

import { ReactiveFormsModule } from '@angular/forms';

@NgModule({
  imports: [
    // ...其他模块
    ReactiveFormsModule
  ]
})
export class AppModule { }

为什么之前的代码不行？ #

• 没有使用ngModel或响应式表单控件，Angular无法追踪复选框的选中状态
• 原来的name="{{'choices'+i}}"会导致不同section下的第一个复选框name都是choices0，表单无法区分这些控件，自然拿不到正确的值

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