首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

Angular FormGroup获取所选复选框的数组

Angular FormGroup是Angular框架中的一个类,用于管理表单控件的值和验证。它提供了一种方便的方式来获取所选复选框的数组。

要获取所选复选框的数组,可以使用FormGroup的get方法来获取FormControl对象,然后通过FormControl对象的value属性来获取控件的值。对于复选框,其值是一个布尔类型的数组,其中选中的复选框对应的元素为true,未选中的复选框对应的元素为false。

以下是一个示例代码,演示如何使用FormGroup获取所选复选框的数组:

代码语言:txt
复制
import { Component } from '@angular/core';
import { FormGroup, FormControl } from '@angular/forms';

@Component({
  selector: 'app-example',
  template: `
    <form [formGroup]="myForm">
      <label>
        <input type="checkbox" formControlName="option1"> Option 1
      </label>
      <label>
        <input type="checkbox" formControlName="option2"> Option 2
      </label>
      <label>
        <input type="checkbox" formControlName="option3"> Option 3
      </label>
    </form>
    <button (click)="getSelectedOptions()">Get Selected Options</button>
  `
})
export class ExampleComponent {
  myForm: FormGroup;

  constructor() {
    this.myForm = new FormGroup({
      option1: new FormControl(false),
      option2: new FormControl(false),
      option3: new FormControl(false)
    });
  }

  getSelectedOptions() {
    const selectedOptions = Object.keys(this.myForm.controls)
      .filter(key => this.myForm.controls[key].value);
    console.log(selectedOptions);
  }
}

在上述示例中,我们创建了一个名为myForm的FormGroup对象,并为每个复选框创建了一个FormControl对象。在getSelectedOptions方法中,我们使用Object.keys和filter方法来获取选中的复选框的键名,并将其打印到控制台。

推荐的腾讯云相关产品:腾讯云云服务器(CVM)和腾讯云对象存储(COS)。

  • 腾讯云云服务器(CVM):提供可扩展的计算容量,可根据业务需求灵活调整配置,支持多种操作系统和应用场景。详情请参考:腾讯云云服务器
  • 腾讯云对象存储(COS):提供高可靠、低成本的对象存储服务,适用于存储和处理各种类型的数据,包括图片、音视频、文档等。详情请参考:腾讯云对象存储

希望以上信息能对您有所帮助。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

Angular 从入坑到挖坑 - 表单控件概览

,并添加到根模块 imports 数组中 import { BrowserModule } from '@angular/platform-browser'; import { NgModule }...当构建复杂表单时,可以在 FormGroup 中通过嵌套 FormGroup 使表单结构更合理 import { Component, OnInit } from '@angular/core';...使用 FormBuilder 构建控件,每个控件名对应值都是一个数组,第一个值为控件默认值,第二项和第三项则是针对这个值设定同步、异步验证方法 import { Component, OnInit...然后,一旦控件数据发生了变化,angular 就会调用这些函数 这里创建针对指定控件 getter 方法,从而在模板中通过此方法来获取到指定控件状态信息 import { Component, OnInit...: ValidatorFn = (controlGroup: FormGroup): ValidationErrors | null => { // 获取子控件信息 // const name

18.9K20

Angular 2 + 折腾记 :(7) 初步了解表单:模板驱动及数据驱动及脱坑要点

首先需要操作表单模块引入这两个模块; import { FormsModule, ReactiveFormsModule } from '@angular/forms'; ---- 表单控件响应几种状态...=》 可以理解为获取且可以操作整个表单数据 FormBuilder:表单数据构建工具[构建初始表单],简化构建代码(包括了new FormGroup(),new FormControl(),new...FormArray()),FormGroup()内置多种校验方式 formControlName: 同步与FormGroup构建表单内相同字段值!.../core'; import { FormGroup, Validators, FormBuilder } from '@angular/forms'; // 引入表单一些特性 import { Router.../core'; import { Router, ActivatedRoute } from '@angular/router'; import { FormGroup, FormControl, Validators

3.8K20

当nz-checkbox-group多选框组遇上必选校验

当nz-checkbox-group多选框组遇上必选校验 Angular2 ng-zorro-antd checkbox 今天表单中用到ng-zorro-antd组件多选框nz-checkbox-group...本篇是讲述是从遇到问题到最终解决问题全过程,对于想要直接获取答案小伙伴可直接跳至 再次尝试 一节。...nzValidateStatus 会自动从 NgControl 中获取数据,也可以手动指定特定 NgControl组件将表单校>验函数校验过程和异步返回结果显示对应error | validating...于是有了如下终极解决方案: 问题.html中不用做修改。 问题.ts修改如下: //因为不想在提交方法_submitForm()再循环一遍获取多选结果,就只好在这先定义一个临时用于存储选择结果。...} _submitForm() { this.validateForm.value.one = this.selectedOne; } //创建自定义校验规则onesValidator,用于复选框组校验时调用

4.3K20

理论 | Angular响应式编程 -- 浅淡 Rx 流式思维

Angular 中处理响应式表单只有 3 个步骤: 1、在组件 HTML 模版中给要处理控件加上 formControlName="blablabla" 2、form 标签中添加 [formGroup...]="xxx" 指令,这个 xxx 就是你在组件中声明 FormGroup 类型成员变量:比如下面代码中 form: FormGroup; 3、在组件构造函数中取得 FormBuilder 后(...比如下面代码中 constructor(private fb: FormBuilder) { }),用 FormBuilder 构造表单控件数组并赋值给刚才类型为 FormGroup 成员变量。...这两个数据流其实是来自于两个控件变化,而响应式表单获取变化是非常简单就一行: 上面这行代码意思是从表单控件数组中取得 formControlName 为 age 这个控件然后监听其值变化...Angular 4 中 NgIf 改进 Angular 4 中 ngIf 现在可以携带 else 了,如果你曾经使用过 Angular 就知道,原来我们是得写两个 ngIf 来完成类似的功能

5.2K10

Angular系列教程-第四节

1.表单 Angular 提供了两种不同方法来通过表单处理用户输入:响应式表单和模板驱动表单。...两者都从视图中捕获用户输入事件、验证用户输入、创建表单模型、修改数据模型,并提供跟踪这些更改途径 使用’@angular/forms’库中FormGroup, FormControl,FormArray...,FormBuilder 等类构建出数据对象就是响应式表单,在响应式表单中,我们会在数据源里面进行各种操作,像添加校验等,在html文件中使用 formGroup,formGroupName,formControlName...总结 响应式表单是动态,模板驱动表单是固定 2.响应式表单使用 注册ReactiveFormsModule 组件导入FormControl 模板中注册组件 控件值(获取setvalue...) 表单验证 同步验证器和异步验证器 备注:同步验证先执行,异步验证后执行 3.模板驱动表单使用 导入formcontrol 使用ngModel实现双向绑定 使用模板变量来获取表单 4

2.8K50

Angular 结合 NG-ZORRO 快速开发

这是我参与「掘金日新计划 · 4 月更文挑战」第7天。 连更这几天文章,我们已经了解了不少 angular 知识点了,这次我们来个小成品。...结合 ng-zorro angular 比较流行 ui 框架有: Angular Material 官方指定 UI 框架 NG-ZORRO,又名 Ant Design of Angular 国内比较流行...如果你还不了解相关 angular 主要内容,请先前往文章了解 Angular 开发内容。...然后我们再把相关权限菜单渲染到页面 替换成上面的代码后,得到基本骨架如下: image.png 完成用户列表 接下来完成用户列表骨架,因为使用了 UI 框架,我么写起来异常方便: 获取用户列表...// user-info.component.ts import { Component, OnInit } from '@angular/core'; import { FormBuilder, FormGroup

1.7K10

Angular: 最佳实践

Note: 本文中,我将尽量避免官方在 Angular Style Guide 提及模式和有用实践,而是专注我自己经验得出东西,我将用例子来说明。...类型规范 Typing 我们主要是用 TypeScript 去编写 Angular(也许你只是用 JavaScript 或者谷歌 Dart 语言去写),Angular 被称为 TYPEScript 也是有原因...服务 Services 服务是 Angular 中业务逻辑存放和数据处理方案。拥有提供数据访问、数据操作和其他可重用逻辑结构良好服务非常重要。...读者可能意识到我并没有写关于 Directives 和 Pipes 相关内容,那是因为我想写篇详细文章,关于 Angular 中 DOM 是怎么工作。...所以本文着重介绍 Angular 应用中 TypeScript 内容。 希望本文能够帮助你编写更干净代码,帮你更好组织你应用结构。

2.8K40
领券