欢迎来到代码驿站!

AngularJS

当前位置:首页 > 网页前端 > AngularJS

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

时间:2022-12-08 12:54:13|栏目:AngularJS|点击:

前言

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

尝试

获取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

总结

上一篇:详解Angular4 路由设置相关

栏    目:AngularJS

下一篇:没有了

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

本文地址:http://www.codeinn.net/misctech/220846.html

推荐教程

广告投放 | 联系我们 | 版权申明

重要申明:本站所有的文章、图片、评论等,均由网友发表或上传并维护或收集自网络,属个人行为,与本站立场无关。

如果侵犯了您的权利,请与我们联系,我们将在24小时内进行处理、任何非本站因素导致的法律后果,本站均不负任何责任。

联系QQ:914707363 | 邮箱:codeinn#126.com(#换成@)

Copyright © 2020 代码驿站 版权所有