如何在angular 4/6/7中的表单提交中传递所有选中的复选框值

在Angular中，表单提交通常涉及到使用FormsModule或ReactiveFormsModule。对于复选框，我们通常会使用[(ngModel)]进行双向数据绑定（在FormsModule中）或使用FormControl（在ReactiveFormsModule中）。以下是在Angular 4/6/7中通过表单提交传递所有选中复选框值的方法：

使用 FormsModule

首先，确保在你的模块中导入了FormsModule：

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

@NgModule({
  imports: [
    // ...
    FormsModule
  ],
  // ...
})
export class AppModule { }

然后，在组件模板中，你可以这样绑定复选框：

<form (ngSubmit)="onSubmit()">
  <input type="checkbox" id="option1" name="options" [(ngModel)]="selectedOptions.option1" value="Option 1">
  <label for="option1">Option 1</label>

  <input type="checkbox" id="option2" name="options" [(ngModel)]="selectedOptions.option2" value="Option 2">
  <label for="option2">Option 2</label>

  <!-- 更多复选框... -->

  <button type="submit">Submit</button>
</form>

在组件类中，定义一个对象来存储选中的复选框值：

export class YourComponent {
  selectedOptions = {
    option1: false,
    option2: false,
    // ...
  };

  onSubmit() {
    const selectedValues = Object.keys(this.selectedOptions)
      .filter(key => this.selectedOptions[key])
      .map(key => this.selectedOptions[key]);

    console.log(selectedValues);
    // 在这里发送到服务器
  }
}

使用 ReactiveFormsModule

如果你使用的是响应式表单，首先导入ReactiveFormsModule：

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

@NgModule({
  imports: [
    // ...
    ReactiveFormsModule
  ],
  // ...
})
export class AppModule { }

在组件模板中，使用formControlName绑定复选框：

<form [formGroup]="form" (ngSubmit)="onSubmit()">
  <input type="checkbox" id="option1" formControlName="option1" value="Option 1">
  <label for="option1">Option 1</label>

  <input type="checkbox" id="option2" formControlName="option2" value="Option 2">
  <label for="option2">Option 2</label>

  <!-- 更多复选框... -->

  <button type="submit">Submit</button>
</form>

在组件类中，创建一个FormGroup并处理提交：

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

@Component({
  // ...
})
export class YourComponent {
  form: FormGroup;

  constructor(private fb: FormBuilder) {
    this.form = this.fb.group({
      option1: false,
      option2: false,
      // ...
    });
  }

  onSubmit() {
    const selectedValues = this.form.value
      .filter((value, key) => this.form.controls[key].value)
      .map(value => value);

    console.log(selectedValues);
    // 在这里发送到服务器
  }
}

在这两种方法中，我们都能够在表单提交时获取所有选中的复选框值。记得在实际应用中根据你的需求选择合适的方法，并且处理好数据的发送逻辑。

参考链接：