如何将复选框值分配给 Angular 表单控件名称？答案

【问题标题】：How to assign a checkbox value to Angular form control name?如何将复选框值分配给 Angular 表单控件名称？
【发布时间】：2019-11-29 17:25:54
【问题描述】：

我想指定复选框的值而不是真或假。我怎样才能做到这一点？

<input formControlName="ota" value="OTA" type="checkbox">

【问题讨论】：

类似问题stackoverflow.com/questions/43154299/…
但这不起作用。我正在使用表单控件

标签： angular angular-cli

【解决方案1】：

您可以使用更改事件，然后使用patchValue（或setValue）分配$event.target.value（如果已选中）。如果没有，则分配其他内容。这里我分配一个空字符串：

<input formControlName="ota" (change)="$event.target.checked ? 
       otaCtrl.patchValue($event.target.value) : otaCtrl.patchValue('')" 
       value="OTA" type="checkbox">

otaCtrl 是表单控件的变量：

otaCtrl: FormControl;

// code...

this.otaCtrl = this.myForm.get('ota') as FormControl;

DEMO

【讨论】：

只是想在这里补充一点，我只能让您的解决方案适用于一个复选框。使用多个动态复选框，我必须编写一个函数并将事件发送给它。
嗨，你能回答我的问题吗stackoverflow.com/questions/47889068/…
如果您能回答这个问题，可能会有所帮助。
在你的例子中，什么是“myForm”？我没有看到它声明。
@AppDreamer 好吧，OP 没有指定FormGroup 的名称，所以我为表单组名称使用了一个伪名称，即myGroup。我的答案附有一个演示，因此您也可以查看:)

【解决方案2】：

我无法获得使用多个动态构建表单复选框元素的公认答案。因此，基于该选择的答案，我这样做了（假设复选框的值是布尔值）：

export class DynamicFormComponent implements OnInit {

  activeCtrl: FormControl;
  ...
  updateCheckBoxVal(prop, eve) {
    this.activeCtrl = this.form.get(prop.key) as FormControl;
    this.activeCtrl.patchValue(eve.checked);
  }
}

HTML 文件：

<label *ngSwitchCase="'checkbox'" [attr.for]="prop"> {{prop.label}}
        <input  
        [formControlName]="prop.key" 
        [id]="prop.key"
        [type]="prop.type"
        [checked]="prop.value" 
        (change)="updateCheckBoxVal(prop, $event.target);"
        />
      </label>

希望这对某人有所帮助，感谢@AJT_82 的启发

【讨论】：

也许你可以回答我的问题，stackoverflow.com/questions/65429846/…