使用响应式将复选框绑定到值而不是 true/false

Question

我试图获得一个使用 reactive/model 驱动表单的简单示例。我想将复选框数组绑定到值列表，而不是布尔值列表。

这个 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

复选框值已选中 (true) 或未选中 (false)。一般来说，复选框具有另一个值没有意义，但如果您仍然想这样做，则需要编写自己的复选框值评估程序。

Answer 2

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+ 有盒装香蕉符号直接绑定到模型，但该数据类型必须是布尔值才能与复选框一起使用：

<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'"/>

使用响应式将复选框绑定到值而不是 true/false

Bind checkbox to value instead of true/false with reactive forms

angular2-forms

angular