angular - 我应该如何使用 Angular 6 处理我的动态复选框

Question

我有一组来自 webservice: 的类别categories，以及一个包含选定类别的数组：selectedCategories

要显示所有复选框，我会：

<form [formGroup]="formGroup" (ngSubmit)="onSubmit()">
  <div class="row">
    <div *ngFor="let category of categories">
      <input type="checkbox" class="custom-control-input" [id]="category.id" formControlName="category"
             [checked]="categoriesSelected?.includes(category.id)">
      <label class="custom-control-label" [for]="category.id">{{ category.name | translate }}</label>
    </div>
  </div>
</form>

这很好用。

然后我建立我的formGroup：

ngOnInit() {
    this.categoriesSelected = this.championships.map(championship => championship.category.id);
    this.formGroup = this.formBuilder.group({
      categories: this.formBuilder.array([{}])
    });
  }

现在，我需要的输出只是所选类别的 ID。

我对链接formBuilder和formGroup有点迷茫。

如果我formControlName="categories"在模板中添加input标签，所有数据都会消失。

我应该怎么做？

标签： angularangular-reactive-forms

Answer 1

你很接近了，你只需要categoriesSelected进入this.formBuilder.array()并进行一些轻微的标记编辑。在您的组件中：

  constructor(private formBuilder: FormBuilder) {
    this.myGroup = this.formBuilder.group({
      myCategory: this.formBuilder.array(this.categoriesSelected)
    });
  }

您可以使用 ngFor 的索引来访问单独的categories数组以标记复选框：

<form [formGroup]="myGroup">
    <div *ngFor="let category of myGroup.controls['myCategory'].controls; let i = index">
        <input type="checkbox" [formControl]="category">
    <label>{{ categories[i].name }}</label>
    </div>
  Selected: <strong>{{ myGroup.get('myCategory').value }}</strong>
</form>

演示：https ://stackblitz.com/edit/angular-vntktv