使用反应形式将复选框绑定到值而不是真/假

Question

我正在尝试使用响应式/模型驱动的表单来制作一个简单的示例。我想将复选框数组绑定到值列表，而不是布尔值列表。

这个 plunker 显示了问题：http://plnkr.co/edit/a9OdMAq2YIwQFo7gixbj?p=preview 绑定到表单的值是布尔值，我希望答案类似于 ["value1", "value2", etc]

我有这样的东西，但我不知道如何得到我想要的结果？

模板：

<form [formGroup]="checkboxGroup">
    <input *ngFor="let control of checkboxGroup.controls['myValues'].controls" 
    type="checkbox" id="checkbox-1" value="value-1" [formControl]="control" />
</form>

还有组件：

let checkboxArray = new FormArray([
  new FormControl({checked: true, value: "value1"}),
  new FormControl({checked: false, value: "value2"}))]);

this.checkboxGroup = _fb.group({
  myValues: checkboxArray
});

Answer 1

Angular.js (1.x) 有ng-true-value和ng-false-value，方便避免web表单和不灵活的后端之间的转换：

<input type="checkbox" ng-model="vv[name]" ng-true-value="'1'" ng-false-value="'0'"/>

Angular 2+ 具有可直接绑定到模型的“banana-in-a-box”表示法，但该数据类型必须是布尔型才能与复选框一起使用：

<input type="checkbox" [(ngModel)]="vv[name]"/>

如果你真的不能使用布尔值，[checked] 和 (change) 表示法是一个可行的替代品（在这种情况下，1 为真，0 为假）：

<input type="checkbox" [checked]="vv[name]==='1'"                                            
    (change)="vv[name]=$event.target.checked?'1':'0'"/>

Answer 2

复选框值被选中 (true) 或未选中 (false)。 一般来说，复选框有另一个值是没有意义的，但如果你想这样做，你需要编写自己的复选框值评估器。