以角度反应形式读取复选框FormControl值

在Angular框架中，FormControl 是表单控件的一种，用于跟踪表单字段的值和状态。复选框（Checkbox）是一种常见的表单元素，它可以表示一组选项中的一个或多个选项被选中。在Angular中，你可以通过 FormControl 来管理复选框的状态。

基础概念

FormControl: Angular表单模块中的一个类，用于表示单个表单控件。
FormGroup: 用于表示一组相关的表单控件。
FormArray: 用于表示一组控件的数组。

类型

复选框通常用于多选场景，它可以有以下几种类型：

单个复选框：表示一个布尔值（true/false）。
复选框组：表示一组选项中的一个或多个被选中。

应用场景

用户偏好设置: 允许用户选择他们感兴趣的功能或通知。
产品筛选: 在电商网站中，允许用户根据多个条件筛选产品。
权限管理: 在后台管理系统中，允许管理员为用户分配多个权限。

示例代码

以下是一个简单的Angular组件示例，展示了如何使用 FormControl 来读取复选框的值，并以角度反应形式处理这些值。

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

@Component({
  selector: 'app-checkbox-form',
  template: `
    <form [formGroup]="checkboxForm">
      <label>
        Option 1
        <input type="checkbox" formControlName="option1">
      </label>
      <label>
        Option 2
        <input type="checkbox" formControlName="option2">
      </label>
      <button (click)="submit()">Submit</button>
    </form>
    <p>Selected Options: {{ selectedOptions | json }}</p>
  `
})
export class CheckboxFormComponent {
  checkboxForm = new FormGroup({
    option1: new FormControl(false),
    option2: new FormControl(false)
  });

  get selectedOptions() {
    return this.checkboxForm.value;
  }

  submit() {
    console.log('Selected Options:', this.selectedOptions);
  }
}