首页 > 解决方案 > 将复杂对象绑定到 Angular 6 反应表单复选框

问题描述

我正在使用 Angular 6,我正在使用 Reactive Forms。我有一个使用 applicationVersion 和 applicationBuild 的复合键的数据源。

[{
    "applicaitionVersion":"1",
    "applicationBuild":"2",
    "label": "Build 1.2"
}, 
{   
    "applicaitionVersion":"1",
    "applicationBuild":"3",
    "label": "Build 1.3"
}]

我的表单使用上面的数据生成一个带有 formControls 的 formArray,并使用以下 HTML 输出它。

<div class="col-sm-6.col-md-4" *ngFor="let build of builds">
    <label>
     <input type="checkbox" [value]='build' [formControl]="formGroup.get(build.customKey)">
     {{ build.label}}
   </label>
</div>

当我选中复选框时。我希望 formGroup.value 具有复选框的 [value] 而不仅仅是 formArray 告诉我该特定复选框是真还是假。

这可能吗?如果是这样,我将如何在不听 onchange 和映射值的情况下执行此操作?

标签: angularangular-reactive-forms

解决方案


推荐阅读