如何为Angular表单控件名称指定一个复选框值？

Question

我想指定复选框的值而不是true或false.我怎样才能实现这一目标？

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

Answer 1

您可以使用更改事件然后使用patchValue(或setValue)分配它$event.target.value是否已选中.如果没有,那么分配其他东西.在这里我分配一个空字符串:

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

where otaCtrl是表单控件的变量:

otaCtrl: FormControl;

// code...

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

DEMO

Answer 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的启发