Angular 2 Reactive Forms复选框 - 将Bool绑定到数字

Question

我有一个表单模型，其中一些指标表示为复选框。目前，他们在表单对象json中将它们的值建模为true / false。我想要的是它们的值分别从布尔值转换为数字1/0。有一种聪明的方法吗？

示例代码：

@Component

template: `
     <form [formGroup]="myForm" (ngSubmit)="save(myForm.value)">
         <input type="checkbox" id="myToggle" formControlName="myToggle"/>
     </form>
`
export class MyComponent implementes OnInit{
private myForm:FormGroup;
myToggle: number;

constructor(private _fb:FormBuilder) {}

ngOnInit() {
    this.myForm = this._fb.group({
      myToggle: [0]
    });
}

希望以上证明我正在尝试将“myToggle”的类型设置为数字。初始化表单是将默认值设置为0并正确选中未选中的复选框。但是，将复选框更新为checked会将表单值设置为true而不是1.我希望将其更新为1.通过this question我看到有一些选项可以将布尔值转换为数字。但是，我不确定如何使用反应形式模型来实现这一点。

Answer 1

FormControl有registerOnChange方法，可让您指定每次更改后执行的回调。

举出示例，您可以访问控件let ctrl = this.myForm.controls["myToggle"]（我更喜欢手动创建）然后您可以像ctrl.registerOnChange(() => ctrl.patchValue(ctrl.value ? 1 : 0));那样做。