如何在Angular中使用模板驱动表单获取复选框选中值

实现步骤 #

1. 修改模板代码

给表单添加ngForm指令，同时给所有复选框设置相同的name属性并绑定ngModel，Angular会自动将选中的值收集到对应数组中：

<form #checkboxForm="ngForm" (ngSubmit)="handleSubmit(checkboxForm.value)">
  <ul>
    <li *ngFor="let chk of checkboxes">
      <input 
        type="checkbox" 
        [id]="chk.id" 
        [value]="chk.value"
        name="selected"
        ngModel
      />
      <label [for]="chk.id">{{chk.name}}</label>
    </li>
  </ul>
  <button type="submit">提交</button>
</form>

2. 组件逻辑处理

在组件中定义复选框数据源，并编写提交方法直接获取格式化后的结果：

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

@Component({
  selector: 'app-checkbox-example',
  templateUrl: './checkbox-example.component.html'
})
export class CheckboxExampleComponent {
  // 你的复选框数据源
  checkboxes = [
    { id: 'chk1', value: 'checkboxValue1', name: '选项1' },
    { id: 'chk2', value: 'checkboxValue2', name: '选项2' },
    { id: 'chk3', value: 'checkboxValue3', name: '选项3' }
  ];

  handleSubmit(formValue: any) {
    // 直接得到你需要的格式，处理未选中任何项的边界情况
    const result = {
      selected: formValue.selected || []
    };
    console.log(result);
    // 后续业务逻辑，比如提交到后端等
  }
}

3. 实时监听选中状态（可选）

如果不需要提交按钮，想要实时获取选中值，可以通过@ViewChild获取表单实例监听值变化：

import { Component, ViewChild, NgForm, AfterViewInit } from '@angular/core';

@Component({
  selector: 'app-checkbox-example',
  templateUrl: './checkbox-example.component.html'
})
export class CheckboxExampleComponent implements AfterViewInit {
  checkboxes = [
    { id: 'chk1', value: 'checkboxValue1', name: '选项1' },
    { id: 'chk2', value: 'checkboxValue2', name: '选项2' },
    { id: 'chk3', value: 'checkboxValue3', name: '选项3' }
  ];

  @ViewChild('checkboxForm') checkboxForm!: NgForm;

  ngAfterViewInit() {
    this.checkboxForm.valueChanges?.subscribe(value => {
      const result = {
        selected: value.selected || []
      };
      console.log('实时选中值:', result);
    });
  }
}

原理说明 #

模板驱动表单中，多个复选框使用相同的name属性并绑定ngModel时，Angular会自动将所有选中复选框的value值收集到一个数组中，对应表单值里的selected字段，完全匹配你需要的输出格式，不需要手动过滤选中状态。

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