前言
Checkbox 作为表单中最常见的一类元素，使用方式分为单值和多值，其中单值的绑定很简单，就是 true 和 false，但是多值（Checkbox Group）的绑定就有一点复杂了。在实际工作中发现很多组件库关于 checkbox-group 的双向绑定一直很别扭，或者说多多少少都有一些瑕疵。
开始本文之前，我们先假定有如下需求：
Checkbox Group 和 Multiple Select 除了很细小的交互差异之外，几乎看不出太大的不同。大多数情况下两者可以相互替换，所以很多人总是困惑两种组件到底应该如何选择。这里 有篇文章 专门对比了两种组件的交互场景，甚至使用 A/B test 去分析用户的偏好。
好像有点跑题了，言归正传，基于这种相似性，我们完全可以仿照 Select 的双向绑定机制去设计 Checkbox Group。
Select 的双向数据绑定
下面我们看一下 Material Select 和 Ng-Select 是如何设计双向绑定的，数据就以上面的 cars 为例。
cars = [
{ id: 1, name: 'Ford' },
{ id: 2, name: 'Chevrolet' },
{ id: 3, name: 'Dodge' },
];
selectedCars = [
{ id: 2, name: 'Chevrolet' }
];
1、Material Select
<mat-select multiple [(ngModel)]="selectedCars" [compareWith]="compareWith">
<mat-option *ngFor="let car of cars" [value]="car">{{car.name}}</mat-option>
</mat-select>
2、Ng-Select
<ng-select [multiple]="true" [items]="cars" bindLabel="name"
[(ngModel)]="selectedCars" [compareWith]="compareWith">
</ng-select>
Material Select 和 Ng-Select 在设计上稍微有一些差别。Material Select 完全基于模板渲染，Ng-Select 则是属性配置优先，两者的数据回显都是通过 compareWith。它们的双向绑定都非常简单，我们没有写任何多余的代码就按规定的格式完成了数据的输入输出，这种设计思路同样可以用在 Checkbox Group 上面。
Checkbox Group 的设计实现
看完上面关于 Select 的两个例子，或许已经不需要我再多说什么了，最终我设计的 Checkbox Group 代码如下：
<mtx-checkbox-group [items]="cars"
bindLabel="name"
[(ngModel)]="selectedCars"
[compareWith]="compareWith">
</mtx-checkbox-group>
上面的代码没有任何多余的过滤筛选就完成了开篇提出的需求，对数据的操作全都隐藏在双向绑定的内部。
总结
这篇文章拖沓了非常久，一方面是自己工作很忙，另一方面做开源项目占据了大部分时间。
从最开始考虑 Checkbox Group 的重构方案到最终实现差不多用了半年多的时间，不过实际开发时间大概也就一周吧。相比之前借鉴 Ant Design 的方案来说，现在的方案更加灵活，有效减少了数据操作的代码，不过仍然有很大的优化和提升空间。
如果大家发现本文有不当之处，欢迎交流指正！