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