角反应形式-带有标签问题的复选框

Question

我需要将带有标签的复选框动态添加到“反应形式”。我发现许多带有FormControls的FormArray解决方案，例如：https://netbasal.com/handling-multiple-checkboxes-in-angular-forms-57eb8e846d21

在该示例中，作者创建的FormControl仅具有复选框的单个布尔值，例如：

this.form = new FormGroup({
skills: new FormArray([
    new FormControl(true),
    new FormControl(false),
  ])
});

使用HTML：

<form [formGroup]=”form” (submit)=”submit(form.value)”>
   <div *ngFor=”let skill of skills.controls; let i=index”>
     <input type=”checkbox” [formControl]=”skill”/> {{user.skills[i].name}}
   </div>
   <button type=”submit”>Submit</button>
</form>

效果很好-但是我需要扩展版本。我需要动态创建带有一些标签的复选框。像这样：

this.form = new FormGroup({
  skills: new FormArray([
    new FormControl({ label: 'Label1', selected: true}),
    new FormControl({ label: 'Label2', selected: false}),
  ]);
});

不幸的是，它不适用于上面显示的基本HTML。如何调整它以使其与带有标签的版本一起使用？

还有其他选择可以处理吗？

我当时正在考虑使用带有两个FormControl（标签和选定对象）的嵌套FormGroup之类的东西-但是使用两个单独的表单控件处理复选框和标签会很奇怪。