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

 更新时间:2022年05月27日 10:28:06   作者:小强Zzz  
AngularJS中数据绑定相信大家应该都不陌生了,这篇文章主要给大家介绍了关于angular多选表单数据绑定的简单尝试,文中通过实例代码介绍的非常详细,需要的朋友可以参考下

前言

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

尝试

获取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多选表单数据绑定内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • 详解ng-alain动态表单SF表单项设置必填和正则校验

    详解ng-alain动态表单SF表单项设置必填和正则校验

    这篇文章主要介绍了详解ng-alain动态表单SF表单项设置必填和正则校验,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-06-06
  • Angularjs使用过滤器完成排序功能

    Angularjs使用过滤器完成排序功能

    这篇文章主要为大家详细介绍了Angularjs使用过滤器完成排序功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-09-09
  • Angular JS 生成动态二维码的方法

    Angular JS 生成动态二维码的方法

    这篇文章主要介绍了Angular JS 生成动态二维码的方法,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2017-02-02
  • angularjs实现简单的购物车功能

    angularjs实现简单的购物车功能

    这篇文章主要为大家详细介绍了angularjs实现简单的购物车功能 ,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-09-09
  • 妙用Angularjs实现表格按指定列排序

    妙用Angularjs实现表格按指定列排序

    使用AngularJS的过滤器,可以很容易的实现在表格中,点击某一列标题进行排序,实现代码也很简单,下面小编给大家分享angularjs实现表格按指定列排序的实现代码,需要的的朋友参考下吧
    2017-06-06
  • 使用AngularJS实现可伸缩的页面切换的方法

    使用AngularJS实现可伸缩的页面切换的方法

    这篇文章主要介绍了使用AngularJS实现可伸缩的页面切换的方法,AngularJS是一款热门的JavaScript库,需要的朋友可以参考下
    2015-06-06
  • AngularJS 中的事件详解

    AngularJS 中的事件详解

    本文主要介绍AngularJS 事件,这里整理了相关资料,比较详细的介绍了AngularJS的使用方法,有需要的小伙伴参考下
    2016-07-07
  • 用Angular实现一个扫雷的游戏示例

    用Angular实现一个扫雷的游戏示例

    这篇文章主要介绍了用Angular实现一个扫雷的游戏示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-05-05
  • 如何利用AngularJS打造一款简单Web应用

    如何利用AngularJS打造一款简单Web应用

    如果大家希望在应用程序的创建工作中采取各类最佳实践,那么AngularJS也能够带来极大的助益。总而言之,这套框架的强大功能与特性永远不会让有着应用开发需求的朋友们失望
    2015-12-12
  • angularjs学习笔记之三大模块(modal,controller,view)

    angularjs学习笔记之三大模块(modal,controller,view)

    本文给大家记录的是angularjs的三大模块(modal,controller,view)的使用说明,方便初学者能够顺利的学习angularjs.
    2015-09-09

最新评论