在一个项目中需要使用到这个功能，看了下官方的文档，说得不是很清楚，使用了formArray，但是没有实现成功。然后谷歌、百度了好久，也没有找到可以真正运行的代码，差点就放弃了。功夫不负有心人，在segmentfault上提问后，得到了相关回答，但是回答中得到了一个外国人博客上的文章，对照着改写了一番，感觉真的就这么实现了，真好，实现得和自己想要的最终结果一模一样。下面就来说说如何进行实现吧！
首先说下实现的逻辑思路，通过FormBuilder, FormGroup, FormArray来获取checkbox的选中状态，然后通过这些选中状态再去获得checkbox的值，再将想要的值展示出来即可。
1、导入相关功能模块
import { FormBuilder, FormGroup, FormArray } from '@angular/forms';
import 'rxjs/add/operator/map';
2、创建checkbox数据源
public select = [
{"name":"leo","selected":true,"sex":"男"},
{"name":"Lily","selected":false,"sex":"女"},
{"name":"Tony","selected":false,"sex":"男"}]
3、命名一个formgrounp，并在constructor中初始化其相关数据
public form:FormGroup;
constructor(public fb: FormBuilder) {
this.form = this.fb.group({
_selected: this.bulidSelected()
});
}
4、创建获取选中的状态数据
bulidSelected() {
const arr = this.select.map(s => {
return this.fb.control(s.selected);
});
return this.fb.array(arr);
}
5、提交表单后获得重组的数据
onSubmit(v) {
const val = Object.assign({}, v, {
value: v._selected.map((status, i) => {
//console.log([status]);
return {
name: this.select[i].name,
sex: this.select[i].sex,
selected:status
}
})
})
console.log(val);
}
6、模板文件
{{form.value|json}}
