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

Question

Angular 2 dynamic form example from Angular 2 website is modified slightly to include checkbox control into the mix. Here is the plnkr 添加了复选框。

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

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

Answer 1

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

The DOM input event is fired synchronously when the value of an <input> or <textarea> element is changed. (For input elements with type=checkbox or type=radio, the input event does not fire when a user clicks the control, because the value attribute does not change.)

input - Event reference | MDN

Answer 2

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

添加 [(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 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 的 emitEvent、emitModelToViewChange 和 emitViewToModelChange默认为true，好像没必要手动更新其他属性。

针对 angular 的 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 带复选框的动态表单不起作用？

Angular 2 dynamic form with checkbox doesn't work?

angular2-forms

angular