前言

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

尝试

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