SCheckbox_Reactive Forms Multiple Checkboxs
今早 (2017-06-20) 收到 深夜徘徊 的邀请，让我帮忙解答 - angular2如何双向绑定多个checkbox？ 这个问题。具体问题如下：
比如我又一个数组如下：
var array = ['喜欢','不喜欢','非常喜欢','超级喜欢','喜欢得不得了'];
html模板中
我盖如何实现，选中其中一个checkbox后，能在div.youselect中显示出我已经选中的内容，如果是多选，则呈现出数组或者以逗号隔开的形式
比如我选中了“喜欢”，“喜欢得不得了”，那么div.youselect中则显示出：“喜欢，喜欢得不得了”
可以使用formArray等方式进行，但是我在使用过程中都没有实现。希望大神出手帮帮忙！
要实现他的需求有两种方式，使用 Template-driven 表单或 Reactive 表单。对于 Reactive 表单中毒太深的我，首先想到的当然是使用 Reactive 的方式哈。若对 Template-driven 方式感兴趣的同学，可以参考 _CRY 的回答哈。废话不多说了，直接来看一下具体实现哈。
具体示例
import { Component, OnInit } from '@angular/core';
import {FormBuilder, FormGroup, FormArray} from '@angular/forms';
@Component({
selector: 'app-root',
template: `
{{likesArr[i].name}}
提交
`,
})
export class AppComponent implements OnInit{
myForm: FormGroup;
likesArr= [
{id: 0, name: '喜欢', selected: true},
{id: 0, name: '不喜欢', selected: true},
{id: 0, name: '非常喜欢', selected: false},
{id: 0, name: '超级喜欢', selected: false},
{id: 0, name: '喜欢得不得了', selected: false}
];
selects: string[] = [];
constructor(private fb: FormBuilder) {}
ngOnInit() {
this.myForm = this.fb.group({
likes: this.buildLikes()
});
this.buildSelected();
this.likes.valueChanges.subscribe(values => {
let selects: string[] = [];
values.forEach((selected: boolean ,i: number) => {
selected === true && selects.push(this.likesArr[i].name)
});
this.selects = selects;
});
}
buildLikes(): FormArray {
return this.fb.array(
this.likesArr.map(like => {
return this.fb.control(like.selected);
})
);
}
buildSelected() {
this.likesArr.forEach((like) => {
if(like.selected) this.selects.push(like.name);
});
}
get likes () {
return this.myForm.get('likes');
}
onSubmit() {
// 根据实际要求进行数据处理
console.dir(this.myForm.value.likes);
}
}
我有话说
Template-driven 与 Reactive Forms 各有什么特点？
Template-driven Forms 的特点
使用方便
适用于简单的场景
通过 [(ngModel)] 实现数据双向绑定
最小化组件类的代码
不易于单元测试
异步创建表单控件
Reactive Forms 的特点
比较灵活
适用于复杂的场景
简化了HTML模板的代码，把验证逻辑抽离到组件类中
方便的跟踪表单控件值的变化
易于动态添加表单控件
易于单元测试
Reactive Forms 中常用的指令有哪一些？
formGroup
formControl
formControlName
formGroupName
formArrayName
Reactive Forms 中如何填充或更新表单的值？
在 Angular 4 中有多种方式可以更新表单的值，对于使用响应式表单的场景，我们可以通过框架内部提供的 API ，如 patchValue 和 setValue 方便地更新表单的值。setValue() 方法需要设置所有表单的值，而patchValue() 只需设置部分值。
patchValue() 示例
this.signupForm.patch({
email: '24065****@qq.com'
});
setValue() 示例
this.signupForm.setValue({
userName: 'semlinker',
email: '24065****@qq.com'
});