带有复选框的Angular 2动态表单不起作用？

Question

稍微修改了Angular 2网站上的Angular 2 动态表单示例 ，以将复选框控件添加到混合中。 这是添加了复选框的plnkr 。

无法在表单提交时获得复选框检查值。 文本框和下拉列表值会在提交时进行更新。

注意：我也尝试将[(ngModel)]放在复选框上，但是即使这样，值也不会更新。

Answer 1

我必须对复选框控件进行两项更改以更新值：

1. 添加[（ngModel）]
2. 更新（更改）事件的值。

如果有人遇到相同问题，这是已修复的plnkr 。

为简便起见，这是复选框控件现在的样子：

<input #ck *ngSwitchWhen="'checkbox'" (change)="control.value = ck.checked" [id]="control.key" [ngControl]="control.key" [type]="control.type" [class.error]="!control.valid"
           [(ngModel)]="control.value" class="form-control">

Answer 2

我认为问题与MDN描述的输入行为有关：

更改<input>或<textarea>元素的值时，将同步触发DOM输入事件。 （对于具有type = checkbox或type = radio的输入元素，用户单击控件时不会触发输入事件，因为value属性不会更改。）

输入-事件参考| MDN

Answer 3

@ Nexus23的解决方案工作，但模板参考VAR的使用#ck只允许一个内复选框FormGroup 。

您可以直接从change事件设置FormControl的值（在FormGroup中 ）：

(change)="formGroup.controls[element.name].setValue($event.target.checked)"

自FormControl。 setValue的emitEvent ， emitModelToViewChange和emitViewToModelChange默认为true ，似乎不需要手动更新其他属性。

修改为angular的动态形式 （ stackblitz上的工作示例 ）：

<input *ngSwitchCase="'checkbox'" [formControlName]="question.key"
        [id]="question.key" [type]="question.type" (change)="form.controls[question.key].setValue($event.target.checked)">

Answer 4

我认为，由于这是用于动态表单的，因此我们无法对复选框参考ID进行硬编码，因为表单中可能有多个复选框。 同样，如果选中了初始值，则该复选框仍会显示为未选中状态。 下面的代码解决了这些问题（已在Angular 2 rc4中进行了测试）。 我还为复选框添加了标签。 希望能有所帮助。

    <label *ngSwitchCase="'checkbox'"><input (change)="question.value = $event.target.checked" [(ngModel)]="question.value" [attr.checked]="question.value ? true : null" [formControlName]="question.key" [id]="question.key" [type]="question.type"> {{question.label}}</label>