Question

来自Angular 2网站的

Angular 2 dynamic form example略有修改，以包含复选框控件。这是添加了复选框的plnkr。

无法在表单提交上获取复选框选中的值。文本框和下拉列值会在提交时更新。

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

Answer 1

我必须对复选框控件进行两处更改才能更新值：

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

如果有人遇到同样的问题，这是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描述的输入行为有关：

当＆lt; input＆gt;的值同时触发DOM输入事件。或＆lt; textarea＆gt;元素改变了。（对于type = checkbox或type = radio的输入元素，当用户单击控件时，不会触发输入事件，因为value属性不会更改。）

input - Event reference | MDN

Answer 3

我认为由于这用于动态表单，因此我们无法对复选框引用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>

Answer 4

@ Nexus23的解决方案有效，但模板参考var #ck的使用仅允许FormGroup内的一个复选框。

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

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

由于FormControl。setValue＆＃39; emitEvent ， emitModelToViewChange 和 emitViewToModelChange 默认为true，似乎没有必要手动更新其他属性。

修改了角度dynamic form（working example on stackblitz）：

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

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

4 个答案: