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

Posted 2023-02-24

【中文标题】Angular 2 Reactive Forms 复选框 - 将 Bool 绑定到数字

【英文标题】：Angular 2 Reactive Forms Checkbox - Bind Bool to Number

【发布时间】：2017-04-01 13:19:31

【问题描述】：

我有一个表单模型，其中包含一些表示为复选框的指标。目前，他们在表单对象 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 我看到有一些将布尔值转换为数字的选项。但是，我不确定如何使用反应式表单模型来实现这一点。

【参考方案1】：

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

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

【讨论】：

有没有办法在表单init中使用这个？我在哪里定义 formGroups、formArrays 等？在我有 30 个真/假指示字段的情况下，这似乎需要很多额外的代码来做一些本应该是微不足道的事情。

这很重要，因为实际的底层 html 指定复选框选中的值是布尔值。 w3.org/wiki/HTML/Elements/input/checkbox 听起来您可以通过例如名称 (name.indexOf("chk") !== -1) 循环遍历控件并一遍又一遍地应用该函数。

你应该创建你自己的函数createNumberCheckbox(formState?: any, validator?: ValidatorFn|ValidatorFn[], asyncValidator?: AsyncValidatorFn|AsyncValidatorFn[]): FormControl let result=new FormControl(formState,validator,asyncValidator); result.registerOnChange/*stuff from my answer*/; return result然后使用它。就像 myToggle: createNumberCheckbox(0) 在 init 或任何地方一样。

@Mate 将值设置为位，但一旦再次单击复选框，它就会返回布尔值

@Gbenro'Skenzy'Selere - 最后我在自己的库 (github.com/mat3e/dorf/tree/master/src/fields) 中采用了不同的方法。您可以验证DorfCheckboxComponent 代码。在 HTML 中有一个存储值的秘密字段：<input [formControl]="formControl" type="hidden" />，它保持正确的类型，还有一个普通的复选框，也标识为 #view。