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

在复选框更改时获取Angular2表单值

在Angular2中,可以通过使用表单控件的valueChanges属性来监听复选框的更改并获取表单的值。

首先,需要在组件类中引入FormControl和FormGroup类,以及使用FormBuilder来创建表单控件。

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

@Component({
  selector: 'app-example',
  template: `
    <form [formGroup]="myForm">
      <label>
        <input type="checkbox" formControlName="myCheckbox"> Checkbox
      </label>
    </form>
  `
})
export class ExampleComponent {
  myForm: FormGroup;

  constructor(private formBuilder: FormBuilder) {
    this.myForm = this.formBuilder.group({
      myCheckbox: false
    });

    this.myForm.get('myCheckbox').valueChanges.subscribe(value => {
      console.log(value); // 在这里获取复选框的值
    });
  }
}

在上述示例中,我们创建了一个名为myForm的FormGroup,并在其中添加了一个名为myCheckbox的FormControl来表示复选框。初始值设置为false。

然后,我们使用valueChanges方法来订阅myCheckbox的值更改事件,并在回调函数中获取复选框的值。在这个例子中,我们简单地将值打印到控制台上,你可以根据实际需求进行相应的处理。

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

相关·内容

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

当nz-checkbox-group多选框组遇上必选校验 Angular2 ng-zorro-antd checkbox 今天表单中用到ng-zorro-antd组件的多选框nz-checkbox-group...,最开始用的是响应式表单的验证+响应式表单的验证,结果总是无法达到预期效果。...刷了n+1遍ng-zorro-antd的官方文档的表单部分后,“自定义异步校验”中看到这样一句话 : 当使用 响应式表单(Reactive Form) 时, 的...nzValidateStatus 会自动从 NgControl 中获取数据,也可以手动指定特定的 NgControl组件将表单校>验函数的校验过程和异步返回的结果显示对应的error | validating...(pending) | warning | success状态,具体使用方式建议参照本demo ----- NG-ZORRO表单一节的文档 本着死马当活马医的心点开里面的dome,仔细看了下,同时实例上试了一下

4.4K20
  • AngularDart Material Design 输入 顶

    请改用表单API clearIconTooltip String  显示清除图标上的工具提示。...如果为真,则它会“漂浮”输入之上。 hideCheckbox bool  是否隐藏选择项之前的复选框以进行多选。...将此设置为true会更改行为,以便在更改选项或选项时:       1.选择中的第一个选定选项中有效       2.如果选择没有选定,则选项中没有任何活动 inputText String...使用materialNumberInputDirectives获取一组与输入一起使用以提供验证的指令。...Accessor始终设置从输入设置的原始String,但仅在可以解析输入时设置Control的。 keypressUpdate属性每个按键上都有值更新,而默认是仅在模糊事件上更新的

    5.3K40

    表单你还在复制粘贴吗?推荐你使用基于Vant-UI二次封装的数据驱动式表单自动生成组件

    前言 使用Vue写移动端开发的时候,难免会遇到需要写很多的表单,所以我现在的项目里面集成了有赞的Vant-ui组件库,但是感觉Vant-ui对于表单组件的调用方式有点繁琐,实在不愿意去干这么一样的事情...,就封装了一个基于Vant-ui的数据驱动式表单自动生成组件。...如果组件引入采取的后编译需要配置这一项) module.exports = { transpileDependencies: [ '@xuanmo/v-form' ] } Props 字段名 说明 类型 默认...v-model(value) 获取组件处理完成的数据 object {} model 数据模型(具体类型参考后续文档) object {} disabled 是否禁用表单 boolean false label-width...left label-color label文字颜色 string - show-label 是否显示label boolean true event 事件名 说明 回调参数 change 数据更改时触发

    1.9K20

    AngularJS2.0 教程系列(一)

    Why Angular2 Angular1.x显然非常成功,那么,为什么要剧烈地转向Angular2? 性能的限制 AngularJS当初是提供给设计人员用来快速构建HTML表单的一个内部工具。...Angular团队希望Angular2中将复杂性 封装地更好一些,让暴露出来的概念和开发接口简单。 ?...@Component最重要的作用是通过selector属性(为CSS选择符),指定这个组件渲染到哪个DOM对象上。 @View最重要的作用是通过template属性,指定渲染的模板。 3....据称,注解的功能就是Angular2团队向traceur团队提出的,这不是traceur的默认选项, 因此你看到,我们配置systemjs使用traceur模块时打开注解: System.config...以组件为核心 Angular1.x中,bootstrap是围绕DOM元素展开的,无论你使用ng-app还是手动执行bootstrap()函数,自举过程是建立DOM之上的。

    2.4K10

    如何判断php复选框是否被选中

    复选框checkbox通常用于php表单提交。本文通过实例给大家介绍php如何判断复选框中的是否被选中。需要它的朋友可以参考本文中的例子。...本文章向大家介绍两个知识点: 1.php表单提交如何获取复选框checkbox的 2.php如何判断复选框checkbox中的是否被选中 下面我们分别对这两个知识点进行讲解: 1、php如何获取复选框...这样设置是因为我们将所有checkbox复选框作为一个组,php服务器端可以使用$_POST[‘category’]来获取所有被选中的复选框。...php 服务器端获取checkbox复选框的代码如下: <?...2、php如何判断复选框checkbox中的是否被选中 知道了php如何获取复选框checkbox的,那么判断复选框checkbox中的是否被选中将变得非常简单,我们只需要将变量$checkbox_select

    7.4K20

    Angular的12个经典问题,看看你能答对几个?(文末附带Angular测试)

    当@angular/core的数据绑定属性更改时,处理就会更改,在从DOM中删除其模板之前,就会销毁掉它。...ngOnChanges:当Angular设置其接收当前和上一个对象的数据绑定属性时响应。 ngOnInit:第一个ngOnChange触发器之后,初始化组件/指令。...loadChildren会从根文件夹中获取绝对路径。RouterModule.forRoot()会获取routes数组并配置路由器。 子模块中导入模块特定路由。...通常Observable比Promise受欢迎,因为它不但提供了Promise特性,还提供了其它特性。使用Observable可以处理0,1或多个事件。你可以每种情况下使用相同的API。...其中,反应最为迅速的就是Wijmo,Wijmo Angular2 发布几个小时后就发布了支持 Angular2 正式版本的 Wijmo。

    17.3K80

    2023跟我学设计模式:中介者模式(Intermediary)

    某些表单元素可能会直接进行互动。 例如, 选中 “我有一只狗” 复选框后可能会显示一个隐藏文本框用于输入狗狗的名字。 另一个例子是提交按钮必须在保存数据前校验所有输入内容。 元素间存在许多关联。...如果直接在表单元素代码中实现业务逻辑, 你将很难程序其他表单中复用这些元素类。 例如, 由于复选框类与狗狗的文本框相耦合, 所以将无法在其他表单中使用它。...资料编辑表单的例子中, 对话框 (Dialog) 类本身将作为中介者, 其很可能已知自己所有的子元素, 因此你甚至无需该类中引入新的依赖关系。 UI 元素必须通过中介者对象进行间接沟通。...伪代码 本例中, 中介者模式可帮助你减少各种 UI 类 (按钮、 复选框和文本标签) 之间的相互依赖关系。...你可以方便地复用各个组件。 一段时间后, 中介者可能会演化成为上帝对象。

    22320

    解决Django中checkbox复选框的传问题

    Django 中,html 页面通过 form 标签来传递表单数据。 对于复选框信息,即 checkbox 类型,点击 submit 后,数据将提交至 view 中的函数。...我们通过request.POST.get() 函数来获取来自 html 页面的,但是该函数只能 get 到选中的最后一个。...因此想要传递选中的多个,需要用 request.POST.getlist() 函数 该函数返回一个列表,可通过迭代来获取列表中每一项的。...补充知识:解决checkbox复选框选中传,不选中不传的方案 解决checkbox复选框选中传,不选中不传的方案 问题描述: 一个form表单中的结构是这样的: ? 则页面显示结果是: ?...”o”,未被选中则传是”n”,其中这是错误的数据,因为被选中传的是on,也就是说checkbox复选框选中传,不选中不传

    4.4K20

    javaWeb核心技术第三篇之JavaScript第一篇

    - for(){}方式 - 函数 "用来完成指定操作的代码片段,java中叫方法,js中叫函数" - 方式1: 普通函数 " function...(标签)对象 - var obj = document.getElementById("id"); "通过id获取一个标签对象" - 获取对象中的value...对象.属性名称 = ; 设置 ///////////////////////////////// 案例1-完善表单校验 需求分析: 当表单提交的时候,校验表单中的用户名和密码是否符合格式...value属性的 标签对象.value = ; 操作标签体: 获取标签体内容: 获取一个标签对象: var 标签对象 = document.getElementById...2.编写函数 a.获取头部复选框状态 对象.checked; b.获取其他的复选框对象 c.遍历其他的复选框对象数组,分别给每一个复选框对象设置checked属性 案例4

    2.4K10

    Vuejs和其他前端框架的对比

    对于后台之类的重表单应用,还是Ng2有优势。 依赖注入无论你喜不喜欢DI,这就是Angular2的强大功能之一。有DI可以不改变代码结构的情况下完成功能替换。...这一点Angular2有原生的service injection pattern。而Vue则没有官方推荐。 对标准向后兼容Angular2一些细节上对标准有更好的支持。...对Observable和Promise,Angular2应用的各个地方,甚至模板级别都有支持(async pipe)。而Vue需要vue-rx等第三方库支持。...这意味着框架和库 (加上一系列松散耦合的工具) 之间做权衡选择。后者会自由,但是也要求你做更多架构上的决定。...例如, Polymer 中唯一支持的表达式只有布尔否定和单一的方法调用,它的 computed 方法的实现也并不是很灵活。

    3.8K110

    个人永久性免费-Excel催化剂功能第58波-批量生成单选复选框

    使用场景 制作一些数据采集表单时,如果需要与用户互动,让用户指定地方来选择相应内容时,用单选、复选框是比较理想的作法,在做了单元格链接的方式后,可以满足采集的数据的准确性。...同时也显得表单更加专业美观。 一般这两大控件对于一般用户来说,较难发现和使用,就算找到了控件入口,也会因排版问题、插入的控件和单元格对齐不准,致使手工反复调整,浪费大量时间。...具体功能实现 批量添加单选、复选框,同时也满足能够批量删除,对复选框来说,可以批量全选、全不选、反选等功能。...总结 单选、多选框的应用,让数据采集表单专业,对用户输入友好,同时数据采集的质量更高,没有理由不去使用,如今Excel催化剂更是把使用它的门槛拉到最低,一键批量操作,方便快捷省心。...若文字教程理解操作不显著,建议可使用视频来查看,后续会录制视频教程,更加直观,更易掌握,若需视频地址,可私信获取

    1.4K20

    ThinkPHP-表单的生成和提交(一)

    表单是Web开发中不可或缺的组件之一,它允许用户输入数据并将其提交到服务器,从而完成一系列操作。ThinkPHP中,表单的生成和提交非常简单,只需使用内置的表单助手函数和请求类,就可以轻松实现。...表单的生成表单生成是指在HTML页面中生成表单元素,例如文本框、下拉框、单选框等等。ThinkPHP提供了一个表单助手函数,可以帮助我们生成这些元素。该函数为form(),可以模板文件中使用。...form()函数中的第一个参数是表单提交的URL地址,第二个参数是表单元素的属性。除了基本的表单元素之外,我们还可以使用form()函数生成复杂的元素,例如下拉框、单选框和复选框。...form-check-input"> 旅行在这个示例中,我们生成了一个包含下拉框、单选框和复选框表单...注意,复选框的name属性是一个数组,因为它可以选择多个

    1.5K11

    Go HTTP 编程 | 03 - 表单的输入与验证

    Go 中对于 form 的处理非常方便, Request 中有专门的 form 处理方法。 以登录表单为例,新建一个登录表达 login.gtpl,表单内容如下: <!...请求,则会执行 esle 代码块,即将提交的信息输出到控制台: 二、表单的验证 获取到了用户提交的数据之后,存储到数据库之前,需要对用户提交的数据进行校验,校验可以在前端通过 JavaScript...对不同类型的表单元素的留空有不同的处理,对于空文本框、空文本区域以及文件上传,元素的为空,而如果是未选中的复选框和单选按钮,则根本不会在 r.Form 中产生相应的条目,实际获取程序的时候需要通过...r.Form.Get() 来获取,若字段不存在,则获取的是空,但是通过这种方式只能获取单个的,如果是 map 还需要通过 r.Form["username"][0] 这种方式获取。...m { return false } 如果要获取表单中的英文,也可以通过正则表达式: if m, _ := regexp.MatchString("^[a-zA-Z]+$", r.Form.Get

    1.3K20

    ASP.NET Core + Angular 2 Template for Visual Studio服务器端预加载的意义何在?Webpack 开发中间件模块热拔插(HMR)

    多个月以来,我和多个Github上的社区贡献者一起建立支持库、包,我们最终的目的是希望完成这样一个作为起点的模板,也就是基于把Typescript代码和Angular2宿主ASP.NET Core项目中...假如你是Linux和MacOS开发,或者使用其他IDE,使用我们的Yeoman生成器来获得VS Code或者其他编辑器上对于Angular2、React、React+Redux或者knockout项目的相同支持...第一件事,虽然通常angular2运行在浏览器里,但是ASP.NET Core Server也可以让他运行在服务器端,所以它可以仅将HTML代码发送到浏览器,不需要javascript就可以显示内容。...为了证明它,你可以通过禁用浏览器的Javascript功能,然后刷新页面来查看内容,对于Chrome来说,你可以打开F12控制台,点击设置,在里面找到Disable Javascript复选框,并且反选它...它支持一些能不运行javascript的爬虫:对于搜索引擎来说,返回简单的HTML代码对于他们来说是简单的理解和收录的。

    3.3K60

    Vue常用特性-表单基本操作和表单修饰符

    1.表单基本操作 1基于Vue的表单操作 Input 单行文本 textarea 多行文本 select 下拉多选 radio 单选框 checkbox 多选框 获取单选框中的...2 的单选框选中 sex: 2, }, }) ​ 获取复选框中的 通过v-model 和获取单选框中的一样...-- 1、 复选框需要同时通过v-model 双向绑定 一个 2、 每一个复选框必须要有value属性 且value 不能一样 3、 当某一个单选框选中的时候...2 和 3 的复选框选中 hobby: ['2', '3'], }, }) 获取下拉框和文本框中的 通过v-model...2.表单修饰符 .number 转换为数值 注意点: 当开始输入非数字的字符串时,因为Vue无法将字符串转换成数值 所以属性将实时更新成相同的字符串。

    1K20

    vue.js与其他前端框架的对比

    对于后台之类的重表单应用,还是Ng2有优势。 依赖注入无论你喜不喜欢DI,这就是Angular2的强大功能之一。有DI可以不改变代码结构的情况下完成功能替换。...这一点Angular2有原生的service injection pattern。而Vue则没有官方推荐。 对标准向后兼容Angular2一些细节上对标准有更好的支持。...对Observable和Promise,Angular2应用的各个地方,甚至模板级别都有支持(async pipe)。而Vue需要vue-rx等第三方库支持。...这意味着框架和库 (加上一系列松散耦合的工具) 之间做权衡选择。后者会自由,但是也要求你做更多架构上的决定。...例如, Polymer 中唯一支持的表达式只有布尔否定和单一的方法调用,它的 computed 方法的实现也并不是很灵活。

    4.2K80

    JavaScript 编程精解 中文第三版 十八、HTTP 和表单

    此类文档都是通过GET方法来获取的。 HTML页面可能包含表单,用户可以表单中填入一些信息然后由浏览器将其发送到服务器。如下是一个表单的例子。...由GET方法获取的资源则是自愿的 URL(例如,/users/larry),该 URL 返回代表这个资源的文档。 第二种方法使用了 HTTP 的一些特性,所以使得整体简洁。...其可以通过其包含一个布尔的checked属性来获取和更改。...选择字段也有一个类似于复选框列表的变体,而不是单选框。 当赋予multiple属性时,标签将允许用户选择任意数量的选项,而不仅仅是一个选项。...中的"Notes"获取它的初始状态,如果其中没有,它会创建示例状态,仅仅带有一个购物列表。

    3.9K20
    领券