动态复选框 - formGroup 中的 FormGroup 包含 formArray答案

【问题标题】：Dynamic checkbox - FormGroup inside a formGroup contains formArray动态复选框 - formGroup 中的 FormGroup 包含 formArray
【发布时间】：2019-05-16 21:22:45
【问题描述】：

我使用https://coryrylan.com/blog/creating-a-dynamic-checkbox-list-in-angular 作为动态添加复选框列表的参考。

我的表单结构是这样的：

 userForm:new FormGroup({
          attributes: new FormGroup({
           roles:new FormArray([])
      })

   })

根据该链接中的 addCheckboxlist，我已重写为，

 private addCheckboxes() {
    this.roles.map((o, i) => {
      const control = new FormControl(i === 0); 
      ((this.userForm.controls.attributes as FormGroup).controls.roles as FormArray).push(control);
    });
  }

现在我不确定如何在 html 中循环获取这些复选框。请帮忙。

编辑：在 TS 中：

 rolesInCompany=[{
  id:"org1",
  name:"ABC"
},{
  id:"org2",
  name:"DEF"
}];

在 HTML 中：

<label formArrayName="roles" *ngFor="let role of userForm.controls.attributes.controls.roles.controls; let i = index">
          <input type="checkbox" [value]="rolesInCompany[i].name" [formControl]="role">
          {{rolesInCompany[i].name}}
        </label>

在提交时，当我同时选择两者时，我会得到角色：Array[true,true]。我需要姓名。

【问题讨论】：

标签： angular

【解决方案1】：

您问题中的链接包含 Stackblitz 中的代码演示

https://stackblitz.com/edit/angular-stszta

这里 app.component.html 是

<form [formGroup]="form" (ngSubmit)="submit()">
  <label formArrayName="orders" *ngFor="let order of form.controls.orders.controls; let i = index">
    <input type="checkbox" [formControlName]="i">
    {{orders[i].name}}
  </label>

  <div *ngIf="!form.valid">At least one order must be selected</div>
  <br>
  <button [disabled]="!form.valid">submit</button>
</form>

【讨论】：

如果这个或任何答案解决了您的问题，请点击复选标记考虑accepting it。这向更广泛的社区表明您已经找到了解决方案，并为回答者和您自己提供了一些声誉。没有义务这样做。
这还没有回答我的问题。答案应该是 userForm.controls.attributes.controls.roles.controls。在 ngFor.我现在可以得到复选框。，我只得到“真”和“假”值。你能帮忙解决同样的问题吗
如果您将<pre>{{ userForm.value | json }}</pre> 添加到您的 HTML 中，您将能够看到表单数据。您是否要访问或设置复选框？如果我记得访问权限是userForm.controls.attributes.controls.roles.controls[i].value，通过userForm.controls.attributes.controls.roles.controls[i].setValue(true) 设置
作为回应，我得到了角色： Array[true,true] 选择两者。但我实际上需要这些的价值。
我需要提交时选中复选框的值

【解决方案2】：

你可以试试 HTML 本身的模板，

<input type="checkbox" *ngFor="let checkbox of checkboxes" value="{{checkbox}}" />

【讨论】：

是的，我试过了。复选框现在是可见的，但它显示为 true 为选中而为 false 为未选中。无论如何要获取选定的值？