Angular中用复选框指令构建多复选框，如何获取特定格式提交数据？

我来帮你搞定这个Angular复选框的需求，结合你给的两组JSON数据，我整理了一套完整的实现方案，包括组件逻辑、模板渲染和提交数据的格式处理：

1. 组件逻辑（TypeScript） #

我们用Angular的响应式表单来管理复选框的选中状态，这样能更便捷地跟踪和处理选中值：

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

@Component({
  selector: 'app-checkbox-filter',
  templateUrl: './checkbox-filter.component.html',
  styleUrls: ['./checkbox-filter.component.css']
})
export class CheckboxFilterComponent {
  // 你提供的原始年份数据
  reportingYears = { 
    "selected":"", 
    "selectReportingYears":[ 
      { "report_date_year":2016 }, 
      { "report_date_year":2017 }, 
      { "report_date_year":2018 } 
    ] 
  };

  // 你提供的原始保险公司类型数据
  insurerTypes = { 
    "selected":"", 
    "selectInsurerType":[ 
      { "insurer_type_name": "Composite" }, 
      { "insurer_type_name":"Life" }, 
      { "insurer_type_name":"Random" } 
    ] 
  };

  // 表单组，用来管理两组复选框的选中状态
  filterForm: FormGroup;

  constructor(private fb: FormBuilder) {
    // 初始化表单，创建两个FormArray分别存储选中的年份和类型
    this.filterForm = this.fb.group({
      selectedYears: this.fb.array([]),
      selectedInsurerTypes: this.fb.array([])
    });
  }

  // 获取年份的FormArray实例
  get selectedYears(): FormArray {
    return this.filterForm.get('selectedYears') as FormArray;
  }

  // 获取保险公司类型的FormArray实例
  get selectedInsurerTypes(): FormArray {
    return this.filterForm.get('selectedInsurerTypes') as FormArray;
  }

  // 年份复选框状态变更时的处理逻辑
  onYearToggle(year: number, isChecked: boolean) {
    if (isChecked) {
      this.selectedYears.push(this.fb.control(year));
    } else {
      const targetIndex = this.selectedYears.controls.findIndex(ctrl => ctrl.value === year);
      if (targetIndex !== -1) {
        this.selectedYears.removeAt(targetIndex);
      }
    }
  }

  // 保险公司类型复选框状态变更时的处理逻辑
  onInsurerTypeToggle(type: string, isChecked: boolean) {
    if (isChecked) {
      this.selectedInsurerTypes.push(this.fb.control(type));
    } else {
      const targetIndex = this.selectedInsurerTypes.controls.findIndex(ctrl => ctrl.value === type);
      if (targetIndex !== -1) {
        this.selectedInsurerTypes.removeAt(targetIndex);
      }
    }
  }

  // 提交表单时整理成你需要的格式
  onSubmit() {
    // 按照你需要的结构整理提交数据
    const submitPayload = {
      reportingFilter: {
        selected: this.selectedYears.length > 0 ? 'selected' : '',
        selectReportingYears: this.selectedYears.value.map(year => ({ report_date_year: year }))
      },
      insurerFilter: {
        selected: this.selectedInsurerTypes.length > 0 ? 'selected' : '',
        selectInsurerType: this.selectedInsurerTypes.value.map(type => ({ insurer_type_name: type }))
      }
    };

    console.log('提交数据:', submitPayload);
    // 这里可以替换成你的API调用，把submitPayload发送到后端
  }
}

2. 模板渲染（HTML） #

通过*ngFor遍历你提供的JSON数据，动态生成复选框，并绑定状态变更事件：

<form [formGroup]="filterForm" (ngSubmit)="onSubmit()">
  <!-- 年份复选框组 -->
  <div class="filter-group">
    <h3>选择报告年份</h3>
    <div *ngFor="let yearItem of reportingYears.selectReportingYears" class="checkbox-item">
      <label>
        <input 
          type="checkbox" 
          (change)="onYearToggle(yearItem.report_date_year, $event.target.checked)"
          [checked]="selectedYears.value.includes(yearItem.report_date_year)"
        >
        {{ yearItem.report_date_year }}
      </label>
    </div>
  </div>

  <!-- 保险公司类型复选框组 -->
  <div class="filter-group" style="margin-top: 2rem;">
    <h3>选择保险公司类型</h3>
    <div *ngFor="let typeItem of insurerTypes.selectInsurerType" class="checkbox-item">
      <label>
        <input 
          type="checkbox" 
          (change)="onInsurerTypeToggle(typeItem.insurer_type_name, $event.target.checked)"
          [checked]="selectedInsurerTypes.value.includes(typeItem.insurer_type_name)"
        >
        {{ typeItem.insurer_type_name }}
      </label>
    </div>
  </div>

  <!-- 提交按钮 -->
  <button type="submit" class="submit-btn" style="margin-top: 2rem;">提交筛选条件</button>
</form>

3. 模块配置 #

别忘了在你的模块中导入响应式表单模块，否则表单功能无法正常工作：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { ReactiveFormsModule } from '@angular/forms';

import { AppComponent } from './app.component';
import { CheckboxFilterComponent } from './checkbox-filter/checkbox-filter.component';

@NgModule({
  declarations: [
    AppComponent,
    CheckboxFilterComponent
  ],
  imports: [
    BrowserModule,
    ReactiveFormsModule // 必须导入这个模块
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

4. 提交数据说明 #

点击提交按钮后，生成的submitPayload结构和你提供的原始JSON结构对应，示例如下（假设选中2017、2018和Composite类型）：

{
  "reportingFilter": {
    "selected": "selected",
    "selectReportingYears": [
      {"report_date_year": 2017},
      {"report_date_year": 2018}
    ]
  },
  "insurerFilter": {
    "selected": "selected",
    "selectInsurerType": [
      {"insurer_type_name": "Composite"}
    ]
  }
}

你可以根据实际需求调整selected字段的取值，比如改成选中项的数量或者其他自定义内容。

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