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

Question

我有一个表单模型，其中包含一些表示为复选框的指标。目前，他们在表单对象 json 中将其值建模为真/假。我想要的是它们的值分别从布尔值转换为数字，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 并正确地保留未选中的复选框。但是，将复选框更新为选中会将表单值设置为 true 而不是 1。我希望将其更新为 1。通过 this question 我看到有一些将布尔值转换为数字的选项。但是，我不确定如何使用反应式表单模型来实现这一点。

Answer 1

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

有了你的例子，你可以访问控制let ctrl = this.myForm.controls["myToggle"]（我更喜欢手动创建），然后你可以像ctrl.registerOnChange(() => ctrl.patchValue(ctrl.value ? 1 : 0));一样做某事。