iis服务器助手广告广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >angular多选表单数据绑定的简单尝试
  • 556
分享到

angular多选表单数据绑定的简单尝试

2024-04-02 19:04:59 556人浏览 安东尼
摘要

目录前言尝试测试总结前言 对于一个多选类型,如何获取所有已选择的数组。 尝试 获取fORMControl的value。 this.formControl.valueChanges.s

前言

对于一个多选类型,如何获取所有已选择的数组

尝试

获取fORMControl的value。

this.formControl.valueChanges.subscribe(value => {
      console.log(value);
})

对于绑定多选类型的formControl的value,只会有true或者false。

如果你选中就是true,如果不选中就是false。但是我想要的是所有选中对象数组。

谷歌搜索得知,可以绑定点击事件,再去增加或删除数组中的对象。

<div *ngFor="let option of formItem.formItemOptions; index as i" class="form-check">
        <input  [formControl]="formControl" [value]="option.id"
                (click)="selectCheckBox(formControl.value, option)"
                 class="form-check-input"
                type="checkbox" >
        <label class="form-check-label mr-1" for="{{id}}_{{option.id}}">
          <span>{{option.content}}</span>
        </label>
      </div>
selectCheckBox(isCheck: boolean, option: FormItemOption): void {
    if (isCheck) {
      this.formItemValue.formItemOptions.push(option);
    } else {
      const index = this.formItemValue.formItemOptions.indexOf(option);
      this.formItemValue.formItemOptions.splice(index, 1);
    }
}

但是获取传入的formControl.value变量为null,猜测可能先出发点击时间,后进行表单数据绑定。
改写方法

selectCheckBox(isCheck: boolean, option: FormItemOption): void {
    // 如果index值为-2,表示数组为定义,创造一个数组
    // 如果index值为-1,表示所选选项并未处于数组内,添加之
    // 如果index值大于等于0,笔试所选选项处于数组内,删除之
    const index = Array.isArray(this.formItemValue.formItemOptions) ? this.formItemValue.formItemOptions.indexOf(option) : -2;
    if (index < -1) {
      this.formItemValue.formItemOptions = [option];
    } else if (index < 0) {
      this.formItemValue.formItemOptions.push(option);
    } else {
      this.formItemValue.formItemOptions.splice(index, 1);
    }
  }

测试

但是如果多选题本身就有对象数组,如何初始化。

想着用input 标签的checked="checked"属性确定初始化选项,发现并未生效,去除input标签的[formControl]="formControl"后,就生效了,猜测可能两个属性冲突。

查看博客上实例,对于每一个选项绑定一个formControl。定义一个FormArray整合所有formControl。如果有需要可以尝试。
https://stackoverflow.com/questions/40927167/angular-Reactiveforms-producing-an-array-of-checkbox-values/69637536#69637536

总结

到此这篇关于angular多选表单数据绑定的文章就介绍到这了,更多相关angular多选表单数据绑定内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

--结束END--

本文标题: angular多选表单数据绑定的简单尝试

本文链接: https://www.lsjlt.com/news/149926.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • angular多选表单数据绑定的简单尝试
    目录前言尝试测试总结前言 对于一个多选类型,如何获取所有已选择的数组。 尝试 获取formControl的value。 this.formControl.valueChanges.s...
    99+
    2024-04-02
  • vue实现简单数据双向绑定
    本文实例为大家分享了vue实现简单数据双向绑定的具体代码,供大家参考,具体内容如下 这里是简单的实现,有助于新手理解消化,当然vue要实现双向数据代理不可缺少,期待后续在更新 vue...
    99+
    2024-04-02
  • C#简单配置类及数据绑定
    目录1、简介2、配置基类3、派生配置类4、数据绑定4.1 Winform中的数据绑定4.2 WPF下的数据绑定1、简介 本文实现一个简单的配置类,原理比较简单,适用于一些小型项目。主...
    99+
    2024-04-02
  • 绑定表单数据时Golang GIN出错
    php小编新一为大家带来关于Golang GIN框架在绑定表单数据时出错的解决方案。在使用GIN框架进行表单数据绑定时,有时会遇到一些问题,如无法正确解析表单数据。这些问题可能是由于参...
    99+
    2024-02-10
    堆栈溢出
  • Vue之表单事件数据绑定详解
    <body> <div id="root"> <form action="" @submit.prevent="demo"...
    99+
    2024-04-02
  • ADO 2.6怎么实现简单型数据绑定和复杂性数据绑定
    本篇内容介绍了“ADO 2.6怎么实现简单型数据绑定和复杂性数据绑定”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!我们介绍了从ADO 记录集...
    99+
    2023-06-17
  • Vue表单事件数据绑定举例分析
    这篇文章主要讲解了“Vue表单事件数据绑定举例分析”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“Vue表单事件数据绑定举例分析”吧!<body>   ...
    99+
    2023-06-25
  • js项目中双向数据绑定的简单实现方法
    目录前言发布订阅者模式结果调用总结前言 双向数据绑定 指的是当对象的属性发生变化时能够同时改变对应的UI,反之亦然。换句话说,如果我们有一个user对象,这个对象有一个name属性...
    99+
    2024-04-02
  • ireport数据表格报表的简单使用
    如果出现ireport打不开的问题正常都是因为JDK版本太高了,百度下如何简单,很容易的 首先:文件->new,选择Blank A4,Open this template 2...
    99+
    2024-04-02
  • 教你JS更简单的获取表单中数据(formdata)
    在文章正式开始之前呢,先介绍一个知识点,那就是var和let的区别,查看了各路大佬的文章,也经过各种尝试,最终得出的结果是,let声明的变量只在该变量对应的块中有效,有点局部变量的意...
    99+
    2023-05-20
    js获取表单数据 js formdata
  • Angular如何将填入表单的数据渲染到表格
    这篇文章将为大家详细讲解有关Angular如何将填入表单的数据渲染到表格,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。一、项目简介我们将采用Angular框架来做一个de...
    99+
    2024-04-02
  • AngularJS如何实现单选框及多选框的双向动态绑定
    这篇文章给大家分享的是有关AngularJS如何实现单选框及多选框的双向动态绑定的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。AngularJS 在 <input type...
    99+
    2024-04-02
  • JavaScript React 中的数据流:理解单向数据绑定的魅力
    1. 增强可预测性 单向数据绑定强制执行数据的单一来源,这简化了数据流并减少了错误的可能性。开发人员可以清楚地跟踪数据的修改和来源,确保代码的可预测性和可维护性。 2. 避免状态争用 在双向数据绑定中,当多个组件修改同一数据时,可能会发生...
    99+
    2024-04-02
  • vue表单数据绑定变量不存在报错如何解决
    本篇内容介绍了“vue表单数据绑定变量不存在报错如何解决”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!一、v-model的使用方法v-mod...
    99+
    2023-07-06
  • MyBatis实现简单的数据表分月存储
    目录前言一、简单的思路分析和代码1.1 判断是否存在对应的月度表1.2 根据月份区分创建表1.3 根据月份插入数据表1.4 完整的使用流程前言 今天介绍的一个业务场景主要是数据表过大...
    99+
    2023-03-19
    MyBatis 数据表分月存储 MyBatis 数据表存储
  • C#对WPF数据绑定的菜单插入Seperator分隔
    WPF前台代码展示 <Window.Resources> <local:Source x:Key="src"/> </Window.Resour...
    99+
    2024-04-02
  • ElementUI中如如何实现表单验证、数据绑定、路由跳转
    这篇文章主要介绍ElementUI中如如何实现表单验证、数据绑定、路由跳转,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!1.新建表单组件el-form.vue<template...
    99+
    2024-04-02
  • Mysql 适合单表的数据量是多少
    Mysql 适合单表的数据量是多少,针对这个问题,这篇文章详细介绍了相对应的分析和解答,希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。影响 Mysql 单表的最优最大数量的一个重要因素其实是索...
    99+
    2024-04-02
  • vue中的单项数据流和双向数据绑定冲不冲突
    这篇“vue中的单项数据流和双向数据绑定冲不冲突”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“vue中的单项数据流和双向数据...
    99+
    2023-06-30
  • Vuejs中如何使用指令v-model完成表单的数据双向绑定
    这篇文章给大家分享的是有关Vuejs中如何使用指令v-model完成表单的数据双向绑定的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。基本用法表单控件在实际业务较为常见,比如单选、...
    99+
    2024-04-02
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作