Html 角度2反应形式复选框-将布尔值绑定到数字

我有一个表单模型，其中包含一些用复选框表示的指标。目前，它们以对象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]
    });
}

@组件
模板：`
`
导出类MyComponent实现OnInit{
私人myForm:FormGroup；
myToggle：数字；
构造函数（私有_fb:FormBuilder）{}
恩戈尼尼特（）{
this.myForm=this.\u fb.group({
myToggle:[0]
});
}

---

希望上面的内容说明我正在尝试设置“myToggle”的类型到一个数字。初始化表单会将默认值设置为0，并正确地保留复选框未选中状态。但是，将复选框更新为选中状态会将表单值设置为true，而不是1。我希望将其更新为1。通过我看到有一些选项可用于将布尔值转换为数字。但是，我不确定如何准确导入使用反应式表单模型实现这一点。

FormControl

具有

registerOnChange

方法，该方法允许您指定每次更改后执行的回调

---

有了您的示例，您可以访问控件

let ctrl=this.myForm.controls[“myToggle”]

（我更喜欢手动创建此控件），然后您可以执行类似

ctrl.registerChange（（）=>ctrl.patchValue（ctrl.value？1:0））的操作；

在表单init中没有办法使用它吗？在我定义formGroups、FormArray等的地方？在我有30个true/false指示符字段的情况下，这似乎有很多额外的代码来做一些应该是琐碎的事情。这不是琐碎的，因为实际的底层HTML指定复选框的值是布尔值。听起来您可以通过名称（

name.indexOf（“chk”）！==-1

）循环您的控件，并反复应用该函数。您应该创建自己的函数

createNumberCheckbox（formState？：any，validator？：ValidatorFn | ValidatorFn[]，asyncValidator？：AsyncValidatorFn | AsyncValidatorFn[]）：FormControl{let result=new FormControl（formState、validator、asyncValidator）；result.registerChange/*来自我的答案的内容*/；return result}

然后使用它。如

myToggle:createNumberCheckbox（0）

在init内部或任何地方。@Mate将值设置为bit，但再次单击复选框后，它将返回到boolean@Gbenro“Skenzy”Selere-最后，我在自己的lib中采用了不同的方法（）。您可以验证

DorfCheckboxComponent

代码。在HTML中有一个存储值的秘密字段：

，它保持正确的类型，还有一个普通复选框，标识为

#view

。