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

复选框值选中（true）或未选中（false）。一般来说，复选框有其他值是没有意义的，但如果你想这样做，你需要编写自己的Checkbox Value Assessor。

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+具有“ a-ban-in-a-box”表示法可以直接绑定到模型，但是该数据类型必须为布尔值才能使用复选框：

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

如果您真的不能使用布尔值，则[checked]和（change）表示法是可行的替代方法（在这种情况下，1为true，0为false）：

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

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

2 个答案: