Angular2：如何实例化FormGroup中复选框的状态？答案

【问题标题】：Angular2: How to instantiate the state of the checkbox in FormGroup?Angular2：如何实例化FormGroup中复选框的状态？
【发布时间】：2017-03-07 17:28:01
【问题描述】：

朋友们，我在 Angular 2 应用中有一些表格。在组件中，我使用这样的表单组：

this.formPersonalProfile = new FormGroup({
            private: new FormControl(false),
});

在该组件的模板中，我将复选框描述如下：

<input type="checkbox" private="private" formControlName="private" class="form-check-input">

好的，之后我通过 ngbModal 在弹出窗口中打开此模板，我看到我的复选框未选中。但是当我尝试在控制台中查看 FormGroup 时，我看到 FormGroup 的这个字段为空。只有当我手动点击复选框时，我才会获得所需的值。

我可以通过 FormGroup 设置复选框的默认值吗？

【问题讨论】：

标签： forms angular checkbox

【解决方案1】：

您提供的 sn-p 有点精简，但这里是让复选框正确绑定的一个镜头。

您的输入可能不会像这样嵌套在标记的 formGroup 中

<form [formGroup]="formPersonalProfile">
    <input type="checkbox" private="private" formControlName="private" class="form-check-input" />
</form>

并确保您已在应用模块中导入 ReactiveFormsModule

import { FormControl, FormGroup, ReactiveFormsModule } from "@angular/forms"

// later
@NgModule({
imports: [ BrowserModule, ReactiveFormsModule ],

这是一个可以正常工作的 Plunker，它应该可以为您提供所需的行为： http://plnkr.co/edit/ryQ3G5p165XaXzJHcxUv?p=preview

【讨论】：