angular2或4 获取checkbox的值

在一个项目中需要使用到这个功能,看了下官方的文档,说得不是很清楚,使用了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 [formGroup]="form" (ngSubmit)="onSubmit(form.value)">
  <div *ngFor="let s of _selected.controls;let i = index">
    <input type="checkbox" [formControl]="s">{{select[i].name}}
  </div>
  <input type="submit" value="提交看console">
</form>
{{form.value|json}}
angular2获取checkbox的值
angular2获取checkbox的值

发表评论

电子邮件地址不会被公开。 必填项已用*标注