在前端开发中，表单是必不可少的组件之一。Angular 提供了响应式表单（Reactive Forms）来简化表单的处理和验证。本文将介绍如何在 Angular 2 中使用响应式表单来处理复选框的值，并将这些值存储在一个数组中。
创建响应式表单
首先，我们需要导入 FormsModule 和 ReactiveFormsModule 模块：
------ - -------- - ---- ----------------
------ - ------------ ------------------- - ---- -----------------
-----------
-------- -
------------
-------------------
--
-- ---
--
------ ----- --------- - -接下来，我们可以使用 FormGroup 和 FormControl 类来创建响应式表单。以下代码演示了如何创建一个包含多个复选框的表单：
------ - --------- - ---- ----------------
------ - ---------- ----------- - ---- -----------------
------------
--------- ---------------------
--------- -
----- -------------------
------ ----------- ---- -- -------
------ --------------- -------------------- -----------------------------
-- ---------- --
--------
-------
------- ---------- - ---- --------
-
--
------ ----- ---------------------- -
----- - -
- ---- --------- ------ --------- --- ------ ----- --
- ---- --------- ------ --------- --- ------ ----- --
- ---- --------- ------ --------- --- ------ ----- --
- ---- --------- ------ --------- --- ------ ----- -
--
---- - --- --------------
------------- -
----------------------- -- -
------------------------------ --- -------------------------
---
-
-在上面的代码中，我们首先定义了一个包含多个复选框的 items 数组。每个元素都有一个 key 属性用于标识控件，一个 label 属性用于显示标签文本，以及一个 value 属性表示控件的初始值。
接着，我们创建了一个空的 FormGroup 实例，并使用循环将每个复选框添加为一个 FormControl 控件。此时，表单中的复选框已经与响应式表单相关联，并且可以通过 form.value 属性来获取当前所有复选框的值。
存储复选框值的数组
要将所有选中的复选框的值存储在一个数组中，我们可以使用 valueChanges 方法来订阅表单值的变化，并通过 filter 方法过滤出所有选中的复选框。以下是修改后的示例代码：
------ - --------- - ---- ----------------
------ - ---------- ----------- - ---- -----------------
------ - ------ - ---- -----------------
------------
--------- ---------------------
--------- -
----- -------------------
------ ----------- ---- -- -------
------ --------------- -------------------- -----------------------------
-- ---------- --
--------
-------
------- ------------ --------
-
--
------ ----- ---------------------- -
----- - -
- ---- --------- ------ --------- --- ------ ----- --
- ---- --------- ------ --------- --- ------ ----- --
- ---- --------- ------ --------- --- ------ ----- --
- ---- --------- ------ --------- --- ------ ----- -
--
---- - --- --------------
------------- -
----------------------- -- -
------------------------------ --- -------------------------
---
----------------------
------
------------- -- -------------------------------- -- ----- --- ------
-
----------------- -- -
----- ------------ - ---
--- ------ --- -- ------- -
-- --------------------------- -- ------------ -
---------------------
- ----------------------------------------------------------- --------
---------------------------------------------------------------------------------------