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

【问题标题】：Angular 2 dynamic form with checkbox doesn't work?带有复选框的Angular 2动态表单不起作用？
【发布时间】：2018-05-16 21:58:42
【问题描述】：

Angular 2 网站上的 Angular 2 dynamic form example 稍作修改，以将复选框控件包含在组合中。这是添加了复选框的plnkr。

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

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

【问题讨论】：

您是否尝试过使用更改事件？
感谢@Aish123，感知复选框的更改事件并更新值就可以了。在下面发布答案。

标签： angular angular2-forms

【解决方案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">

【讨论】：

我验证了这个 plnkr 示例，它在提交点击时没有显示检查状态。您可以通过适当的修复更新解决方案吗？

【解决方案2】：

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

当或元素的值改变时，DOM 输入事件被同步触发。（对于 type=checkbox 或 type=radio 的 input 元素，当用户点击控件时不会触发 input 事件，因为 value 属性不会改变。）

input - Event reference | MDN

【讨论】：

在 Angular 2 世界中这个问题的任何解决方案？
我不知道，因为我也有这个文件输入问题

【解决方案3】：

@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)">

【讨论】：

【解决方案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>

【讨论】：