在数组中使用Reactive Form时无法获取多个复选框值
问题描述：在数组中使用Reactive Form时无法获取多个复选框的值。
回答： 在使用Reactive Form处理表单数据时，当表单中包含多个复选框（checkbox）时，可以通过以下步骤获取复选框的值：
- 创建表单控件： 首先，需要在组件的表单定义中创建一个数组类型的FormControl，来表示多个复选框的值，例如：
import { FormBuilder, FormGroup, FormArray } from '@angular/forms';
// 表单创建
constructor(private fb: FormBuilder) {
this.form = this.fb.group({
checkboxes: this.fb.array([])
});
}
// 表单控件获取
get checkboxes() {
return this.form.get('checkboxes') as FormArray;
}- 动态创建复选框： 在组件中，根据需要动态添加复选框控件，例如：
// 添加复选框
addCheckbox(label: string, value: any) {
const checkbox = this.fb.control(false);
this.checkboxes.push(checkbox);
this.checkboxLabels.push(label);
this.checkboxValues.push(value);
}- 模板中渲染复选框： 在模板中使用ngFor指令渲染复选框，并绑定对应的值和标签，例如：
<!-- 模板 -->
<div formArrayName="checkboxes">
<label *ngFor="let checkbox of checkboxes.controls; let i = index">
<input type="checkbox" [formControlName]="i">{{ checkboxLabels[i] }}
</label>
</div>- 获取复选框的值： 在需要获取复选框的值的地方，通过遍历表单控件来获取选中的复选框的值，例如：
// 获取选中的复选框的值
const selectedValues = this.checkboxes.controls
.filter(checkbox => checkbox.value)
.map(checkbox => checkbox.value);总结： 使用Reactive Form处理数组中的复选框时，首先需要创建一个数组类型的FormControl表示复选框的值，在模板中动态渲染复选框，并绑定对应的值和标签。最后，通过遍历表单控件来获取选中的复选框的值。这种方法适用于任何需要在数组中使用Reactive Form处理复选框的情况。
推荐的腾讯云相关产品和产品介绍链接地址： 腾讯云提供了丰富的云计算服务和解决方案，包括云服务器、云数据库、人工智能、大数据分析等。您可以访问腾讯云的官方网站（https://cloud.tencent.com/）了解更多相关信息。
相关·内容
1回答
在角4+中有一个反应性形式，其中有多个check boxes，如下所示：
现在，用户可以选择尽可能多的复选框。因此，此表单的输出是选中的复选框的数组，如下所示：
[
"I have a bike",
"I have a nothing",
"I have a test"
]
我不知道如何在reactive forms中处理这个问题。请注意，我使用的是以下内容：
import {FormGroup, FormBuilder, Validators} from "@angular/forms";
我想要的：
在将
浏览 3提问于2018-01-06得票数 0
我有一个带有复选框的多重选择下拉列表。但我不知道如何将其插入数据库，下次页面打开时，它将显示数据库中的当前值。
如何将多个select下拉列表中的值插入数据库并以选中的方式显示？
<div class="form-group">
<div align="left">
<div class="formlist">Purchase Group :
<select id="purchase_group" n
浏览 2提问于2017-03-28得票数 1
这个问题与相同，但我无法使解决方案在我的java设置中工作。当使用将[]添加到分组复选框的name属性的分摊项时，我只得到第一个选中的选项。我不确定是实际发布的数组只包含一个元素，还是没有访问正确的服务器端。下面是我在java中检查值所做的工作：
@Override
public String execute(HttpServletRequest request, HttpServletResponse response) throws Exception {
for(String name : request.getParameterMap().keySet()){
浏览 1提问于2016-03-31得票数 0
回答已采纳
2回答
我有一段html代码，我在其中迭代了一个数组：
<div class="container">
<ol *ngFor="let g of guides">
<button type="button" class="form-control" (click)="open(g)" [class.not-confirmed]="!g.confirm" [class.confirmed]="g.confirm">{{g.description
浏览 0提问于2017-10-05得票数 0
我有一个Vue 3应用程序。在这个应用程序中，我需要显示一个项目列表，并允许用户在数组中选择项目。目前，我的组件看起来如下：
MyComponent.vue
<template>
<div>
<div v-for="(item, index) in getItems()" :key="`item-${itemIndex}`">
<div class="form-check">
<input class="form-check-input"
浏览 1提问于2021-11-10得票数 1
回答已采纳
1回答
选择所有复选框-反应性窗体角8
、、、、
我的复选框表单中有多个复选框数组。当用户单击select按钮时，我需要使用reactive forms和FormArray选择所有的reactive forms和FormArray--这是我尝试过的：
Ts文件
get formReceivedSummons() {
return this.form.get('receivedSummons') as FormArray;
}
formReceivedSummonsItems(i: number) {
return (this.formReceivedSummons.controls[i].get(
浏览 1提问于2019-09-09得票数 0
回答已采纳
1回答
我正在寻找通过一个复选框提交多个值的最佳方法。这些值正在保存在服务中。
使用属性语法，我可以绑定到另一个data-*属性。是否有一种方法可以合并自定义data-*和value属性的值，以便在“提交”时一起发送，或者是否应该使用getAttribute()方法对此进行不同的处理？
模板
<form [formGroup]="myForm" novalidate>
<template ngFor let-stock [ngForOf]="availableStock">
<p><lab
浏览 4提问于2017-07-03得票数 0
回答已采纳
我在while循环中有一个复选框，如下所示：
<form method="POST">
<?php $sql= mysql_query("SELECT * FROM names WHERE `id` ='$id' ");
while ($get = mysql_fetch_array($sql)){ ?>
<input type="checkbox" name="id_names" value="<? echo $get ['id&#
浏览 2提问于2016-09-29得票数 2
我正在创建一个JSP页面来上传CSV或TXT文件。文件数据由一些分隔符分隔。我正在使用复选框从用户检索，并且基于选中的复选框，我将文本字段值设置为尊重的复选框的值。我还为自定义分隔符添加了一个复选框。当用户选中该复选框时，将显示相同的文本字段(我在其中设置其他复选框的值)，并允许用户输入他们的自定义分隔符。
我还设置了其他一些输入隐藏字段，以便将字符串值和Java对象从前一个servlet传递到下一个servlet。
因为JSP是用来上传文件的，所以我不能使用request.getParameter()。但我可以阅读文本字段。我的意思是，当用户选中定界符复选框而不是自定义复选框时，servle
浏览 0提问于2013-04-24得票数 0
回答已采纳
2回答
有没有办法通读HTML页面并返回所单击的动态复选框的值？
现在，我知道如何在不使用JS的情况下从静态复选框中获取值，但由于我是使用数据库中的数据生成以下复选框，因此我不确定如何定位每个复选框并知道用户选中了哪个复选框。
当我浏览chrome中的开发人员工具时，我可以看到生成的复选框的值发生了变化，但当我引用它们时，它仍然不起作用。
<!DOCTYPE html>
<html lang="en">
<form action="/test" method="post">
<button type=&#
浏览 58提问于2017-07-18得票数 1
回答已采纳
1回答
我正在构建一个页面，reactive，它将在列表中显示一个复选框列表，其中一些项目必须根据收到的数据进行检查。
数据以两个不同的数组出现，一个数组包含所有复选框(RULE_LOOKUP_ID，DESCRIPTION)，另一个数组只是先前检查过的in列表("RULE_IDS"：1，3)。
如果我没有正确地设置表单，我在让它显示时会遇到一些问题。
我正在建立一个小组如下：
this.ruleAssignmentFormGroup = this.formBuilder.group({
RULE_LOOKUP_ID: this.detail.RULE_LOOKUP_ID,
浏览 1提问于2019-04-02得票数 0
我正在使用表单上的onsubmit事件在发送之前验证它。我在获取允许多重选择的复选框的值时遇到了问题。
Html：
<input type="checkbox" name="question5[]" value="1" />
<input type="checkbox" name="question5[]" value="2" />
Javascript：
var form = document.forms['questionnaire'];
var q5
浏览 1提问于2013-09-13得票数 0
回答已采纳
3回答
我得到了一个复选框列表，当我选中复选框时，它应该将值插入到数据库中。当我取消选中复选框时，它应该是从数据库中删除数据。
如果我在checkbox中赋值，那么我只能获得checked复选框值。如果我使用一个隐藏字段，那么我可以得到复选框的所有值，但我不知道哪个1是选中的，哪个1是未选中的。
有人能帮上忙吗？
$num="3";
for($i=1;$i<10;$i++){
?>
<form name="form1" method="post" action="testcheckbox.ph
浏览 0提问于2012-03-24得票数 4
2回答
我正在尝试做一个随机的锦标赛生成器，在这里我可以从一个带有复选框的列表中选择名称，然后将它们随机化成不同的顺序。
我有以下表格：
<form method="post" action="<?php echo ROOT ?>HomeController/createTournament/" enctype="multipart/form-data">
<div class="form-group">
<label for="participants">
浏览 0提问于2019-03-11得票数 0
回答已采纳
2回答
如何在Python中使用复选框
、、、、
我正在尝试在HTML中使用复选框，将这些复选框返回给我的python后端，然后在单击该框时递增三个计数器。
现在，我的HTML代码如下所示，运行正常：
<form method="post">
<input type="checkbox inline" name="adjective" value="entertaining">Entertaining
<input type="checkbox inline" name="adjective" valu
浏览 3提问于2012-11-06得票数 6
回答已采纳
在下面的示例中：
<html>
<head>
<SCRIPT language="JavaScript">
function checkcheckboxElem(checkboxElem)
{
alert ("checkboxElem " + checkboxElem.length);
}
</script>
</head>
<body>
<form name="checkForm">
Master: <input ty
浏览 0提问于2011-10-11得票数 0
回答已采纳
我正在尝试使用formbuilder传递包括angular 6表单中的复选框在内的表单值，但是我无法从checkbox中读取值。我正在从所有其他输入域获取所有值，但只有复选框没有响应，下面是我的代码：
<form [formGroup]="myGroup" (submit)="submit(myGroup.value)">
<div class="row">
<div class="col-sm-4" *ngFor="let info of myGroup.controls
浏览 11提问于2018-07-25得票数 0
回答已采纳
3回答
从表单中获取提交给php的值
、、、、
考虑以下表格：
<form method="get" enctype="multipart/form-data">
<input type="hidden" value="0" name="foo">
<input type="checkbox" value="1" name="foo">
</form>
当提交表单时，如果未选中复选框，将请求URL ...?foo=0。如果选中复选框，将请求URL ...?fo
浏览 2提问于2017-02-17得票数 0
我试图将复选框移动到子组件，但无法让它更新存储在父组件中的数据。
亲本
<template>
<CheckboxComponent
:value="profile.doYouAgree"
label="Do you agree?"
@input="profile.doYouAgree = $event.target.value"
/>
<div>{{ profile.doYouAgree }}</div>
</template>
<script
浏览 3提问于2022-04-11得票数 2
回答已采纳
我通过选择的值(单个值)创建了一个带有列过滤的过滤器，但是当我试图让它过滤列和双值(使用复选框)时，我被困住了。问题是，如何将我从声明的特定列中的复选框中选中的两个或多个值连接起来？有谁能帮我举个例子来解决这个问题吗？谢谢你
这是我现有的代码
//Select Form
<select id="strFltr" class="form-control form-control-sm" multiple="multiple">
<option>STARTER</option>
<option>NON
浏览 0提问于2018-09-10得票数 0
回答已采纳
3回答
我的问题是，我有一个表单，当用户提交表单时，我想接收用户提交的数据。此数据应包装在单个对象中。我在角中使用formBuilder，但似乎大多数情况下都可以使用formBuilder从<input>标记检索数据(引用中的顶部答案"formControlName只用于输入、选择和文本区域。任何具有"value“属性的内容。”
我使用formBuilder在构造函数和初始化字段中定义了一个表单；
component.ts
constructor(private formBuilder: FormBuilder,
) {
this.checkoutForm = this
浏览 2提问于2019-10-04得票数 1
我试图在b表中使用b表单复选框。试图检索选定的模块Ids。
<b-table
id="module-table"
:items="list.modules"
:fields="fields"
:busy="isBusy">
<template slot="num" slot-scope="row">
{{ row.index + 1 }}
</template>
<template slot
浏览 2提问于2022-03-07得票数 0
回答已采纳
2回答
将变量POST到另一个类
、、、
我有一个使用XPath的搜索功能，当结果显示时，一个复选框也会显示出来。
<form name="save" method="POST" action="saveProcess.php">
<?php
foreach ($holidays as $holiday)
{
$resultTable .= "<p><a href=\"{$holiday->link}\">{$
浏览 1提问于2012-04-06得票数 0
2回答
我知道当有多个复选框时，我可以使用jQuery ()来获取复选框值，但是我的复选框输入是在html表单中，所以那些jQuery解决方案无法工作，因为它们都没有从表单中获取复选框值。
我尝试从表单中提取值，但它只是创建了一个奇怪的单选节点列表，它似乎计算复选框的名称在文档中出现的次数，而不是值。
function validateForm() {
var checks = document.forms["TestForm"]["ParticipantSelection[]"];
alert(checks);
}
<script src="
浏览 2提问于2017-04-07得票数 1
回答已采纳
2回答
我有多个复选框的以下代码。
echo $this->Form->input('type', array('type' => 'select', 'multiple' => 'checkbox','options' => array(
'client' => 'Client',
'vendor' => 'Vendor',
浏览 0提问于2011-02-03得票数 2
回答已采纳
我正在尝试将值填入复选框。当数据库中存储有值时，我希望复选框被选中。
这是我的表单代码：
$form ['test_1'] = new Zend_Form_Element_Checkbox('test_1');
$form['test_1']->setLabel('test1')->setCheckedValue('1');
$form ['test_2'] = new Zend_Form_Element_Checkbox('test_2');
$form['t
浏览 1提问于2010-11-19得票数 0
回答已采纳
有没有办法将复选框链接到文本框。例如
<form>
<table>
<tr>
<td><input name="databaseIDs[]" type="checkbox" value="49"/></td>
<td><input type="text" name="first" value="First Input"/></td>
</tr&
浏览 5提问于2016-11-27得票数 3
回答已采纳
1回答
我是新来的拉拉。
如何使用复选框表单根据学生身份添加主题
例如，当我选择一个id 3216的学生，并添加两个主题与id 105和106，mysql将创建如下2条记录。
这是视图代码
<div class="form-group">
<h9>Student ID</h9>
<div class="col-lg-10">
<select class="form-control" name="student_id[]">
浏览 1提问于2022-05-07得票数 -1
1回答
这似乎很简单，但我找不到答案。我有一个表单，所有输入都放在一个对象中。现在后端需要将form对象包装在数组中。所以我有这个：
<input
class="input"
placeholder="Serial #"
v-model="form.serialNum"
/>
// etc for form
和在
let form = reactive({
eqpmntType: "",
make: "",
modelNum: "&#
浏览 2提问于2021-11-18得票数 0
在表单提交时，我希望获取所有表单字段，并将它们保存在一个数组中。但是几乎没有文本框、选择框、输入字段、复选框和单选按钮。这是一个在WordPress中构建的动态表单，用户可以从后端更改这些字段。这是我的密码
var form_label = [];
var form_value = [];
i = 0;
jQuery('#form6 .wdform-field').each(
function (index) {
var form_label[i++] = jQuery(this).find(label).text();
var form
浏览 0提问于2018-03-12得票数 1
回答已采纳
如何获得所有复选框值从视图到控制器？
我的视图页面代码是，
{!! Form::checkbox('control_type[]', 001, '', array('id'=>'control_type', 'name'=>'control_type[]')) !!} {!! trans('noorsi.control_type_001') !!}</br>
{!! Form::checkbox('control_type[]', 002, &
浏览 1提问于2016-03-14得票数 1
我的数据库里有一个产品表。我将从我的数据库中获取产品的名称，并在我的刀片上的引导表中打印该产品的名称。当前，每一行都有一个编辑按钮。如果我按下按钮，我将把这个产品的ID传递给我的控制器编辑功能。现在，我想为这个表中的每个产品添加复选框，如果我设置了两个滴答(所以是两个不同的产品)，我希望同时将两个ID传递给我的控制器。
看起来是这样的：
{!! Form::open(['action' => 'ProductController@tags']) !!}
@foreach($products as $produ
浏览 0提问于2016-05-18得票数 0
回答已采纳
这是我要提交的表格 @using (Html.BeginForm("SigningAsync", "Signing", FormMethod.Post,
new { onsubmit = "return confirm('Do you really want to submit the form?');"}))
{
<div class="col-md-6 col-sm-12 form-group" style="margin-bottom:5px !importan
浏览 24提问于2019-07-03得票数 0
回答已采纳
我使用一个tableselect元素创建了一个自定义表，在每一行中，我都有一个复选框表单元素，它应该从节点中的复选框字段中填充复选框。我尝试过每一种可能的#default_value格式(将其设置为1、array(1)等)，但都没有效果。因为在HTML中，是checked属性导致复选框显示为复选框，所以我想出了以下选项：
foreach($translations as $locale => $locale_data) {
// Get data for other fields...
// Get data for Staging Only checkbox
浏览 0提问于2018-12-03得票数 1
我正在尝试序列化一些表单数据，如果只选中一个复选框，它就会运行得很好，但如果我尝试选中多个复选框，则只会得到选中的第一个复选框的值。
var serializeForm = function (form) {
var obj = {};
var formData = new FormData(form);
for (var key of formData.keys()) {
obj[key] = formData.get(key);
}
return obj;
};
document.querySelector('#form
浏览 2提问于2022-10-12得票数 0
回答已采纳
我想将所有选中的项目放在一个复选框组中，该复选框组是表单面板的一部分。最终，它们将以字符串、逗号分隔值的格式保存回数据库。
感谢您能提供的任何指导或帮助。
下面是我如何定义我的组：
new Ext.form.CheckboxGroup({
id: 'newId',
fieldLabel: 'Group A',
name: 'broker',
allowBlank: false,
columns: 1,
i
浏览 0提问于2010-12-08得票数 3
回答已采纳
我有一个带有复选框的表单，并以数组的形式传递给PHP。然后我使用Foreach循环将表单中的数据插入到MySQL数据库中。正在输入数据，但也在添加一个空白条目。我已尝试验证该值不为空，但仍无法使其不放入空白数据。
表格：
<form action="work.php" method="post">
<input type="checkbox" name="work[]" value="MOC" /> MOC<br />
<input type="checkbox&#
浏览 0提问于2012-09-25得票数 1
1回答
我对v-model的多个复选框有奇怪的问题(至少对我来说是这样)。当使用多个复选框被v-model'ed到一个属性时，会产生普通数组，这是用下面的代码完成的：
.form-check
input.form-check-input(type=“checkbox” name=“checkbox” v-model=“methodology” value=“issue tracking tool”)
label.form-check-label issue tracking tool
然而，当我试图将它移动到单一文件组件时，我不得不从Vue.js论坛复制一些神奇的技巧来使其工作。我仍然
浏览 1提问于2018-05-25得票数 0
4回答
你好，我有这张带有3个复选框的表单：
<form action="send.php">
<input type="checkbox" name="txt_group" value="CID">CID
<input type="checkbox" name="txt_group" value="OSDS">OSDS
<input type="checkbox" name="txt_group" value=&
浏览 3提问于2015-06-11得票数 1
回答已采纳
2回答
我在签出流( CheckoutPane )中创建一个复选框。如何将复选框的值发送到用户配置文件或订单中的实体。
描述:我需要CheckoutPane中的复选框，当客户选择复选框并单击submit时，我必须按照特定用户的顺序或配置文件的日期将值保存在字段中。当客户第一次选中复选框时，该复选框将被隐藏以供以后的订单使用。
复选框已正确打印，但无法按顺序将复选框的值提交给实体，或者更好地将用户配置文件中的实体提交给该实体。我按照顺序创建字段field_customer_check，并与示例中的注释相同。https://docs.drupalcommerce.org/commerce2/develop
浏览 0提问于2022-04-10得票数 0
2回答
我正在使用Bootstrap和Flask Python。
request.form.get("name")
#name is the name of the form element(checkbox)
<label class="btn btn-danger pzt active">
<input type="checkbox" name="name" value="1" data-id="0"> Check
</label>
当复选框被选中
浏览 1提问于2014-01-06得票数 11
基本上我有一个复选框列表，其中的数据是从数据库中检索的，我将其存储在向量中以循环它。现在我需要获取那些被选中(选中)的值，并出于某种目的将其带到另一个jsp，我可以知道如何创建它吗？当我在javascript中发出警告时，我得到了"undefined“值。任何帮助都将不胜感激。谢谢
First.jsp
<%
Vector vFruit_code = new Vector();
Vector vFruit_descp = new Vector();
DB_FRUIT.makeConnection();
String SQL = "SELE
浏览 3提问于2015-05-08得票数 0
在reactive模型中定义数组有一些问题：(因为reactive不能简单地接受模型(afaik)并按它工作，所以我需要手动定义它)：
后端的对象：
{
propOne: 'X',
propTwo: 'Y',
propArray: [
{
objPropA: 'a',
objPropB: 'b'
},
{
objPropA: 'c',
objPropB: 'd'
浏览 6提问于2019-09-26得票数 1
回答已采纳
3回答
我有两个复选框，每当我单击任何复选框时，它们的值(静态数组)都应该插入到“最终”数组(空数组)中。如果我取消选中该复选框，那么它的值(静态数组)应该从“最终数组”中删除。
现在，我正在将“静态”数组插入/推送到空白数组(最终数组)中，但我想知道如何在取消复选框后删除这个“静态”数组？
var myarray = [];
var model = ["Height", "size", "bust"];
var Hostess = ["Height", "bust"];
$("input:checkbox.
浏览 2提问于2022-04-22得票数 0
回答已采纳
嗨，我在做食品应用程序，这个应用程序在集合视图单元格中有食物，我在单元格中添加了复选框，所以我可以通过复选框从单元格中选择一些食物，我在集合视图单元格中添加复选框并添加类for按钮，但是当我单击第一个单元格中的复选框时，所有其他单元格都被选中，
复选框代码
var isCheckedGlobal = Bool() // !! Global Variable // You might need to change '= Bool()' to '= false' or '= true'
class CheckBox: UIButton {
浏览 3提问于2015-06-01得票数 1
回答已采纳
如果选中复选框，我需要在reactive form控制器中返回false
这是我的html：
<mat-checkbox formControlName="EmailOptout" class="form-cb-prom"><mat-checkbox>
以ts为单位
EmailOptout: [this.EmailOptout]
浏览 0提问于2019-03-03得票数 0
我的一个应用程序部分允许用户通过在React中选择单个复选框来选择复选框，方法是将项目填充到复选框。我写了一个代码来处理复选框的onChange，以将_id发送到后端API。
当单击一个复选框时，我面临的问题是所有复选框都被选中。我需要应用程序能够选中一个复选框一次，并捕获其关键id。
我的代码是；
const fetchCategory = async () => {
fetch(`http://localhost:4000/api/v1/category`)
.then(response => response.json())
.then(respons
浏览 3提问于2020-06-11得票数 0
1回答
我有一个表单，其中包含大约20个不同的复选框。如下所示：
<%= form_for @inventory do |f| %>
<p>
<%= f.label :name %><br />
<%= f.text_field :name %>
</p>
...
<p>
<%= f.check_box :apple %><%= f.label :apple %><br />
<%= f.check_box :banana %><%= f.la
浏览 0提问于2011-08-02得票数 6
回答已采纳
尝试使用reactive form validation来验证复选框，但不使用working.How来验证所有复选框是否都应该是selected.If，有人能帮我解决这个问题吗？
浏览 14提问于2019-09-25得票数 0
回答已采纳
我想插入多个带有输入字段值的复选框项。如果选中了任何复选框，那么我需要存储该复选框值和这个li块slno input字段的值。但问题是菜单和slno数组键都不匹配。那么我该如何解决这个问题呢。 下面是我的html代码： <li>
<input type="checkbox" name="menus[]" value="1"> doctor
<input type="number" class="form-control" value="2" name="sln
浏览 24提问于2020-09-02得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
腾讯会议
实时音视频活动推荐
腾讯云开发者
