Question

我有一个动态大小的项目。对于我想要生成复选框的每个项目。我认为最好的方法是使用FormArray。

但我无法设置任何其他属性来指定动态复选框的标签。

items: Array<string> = ['Banana', 'Apple', 'Beer', 'Water'];

let checkboxArray = new FormArray([]);

this.items.forEach(item => {
  let formControl = new FormControl(true);
  checkboxArray.push(formControl);
})

但是正如我们在这里看到的，我只能指定formControl中复选框的值，但不能设置有关标签的任何其他信息。

一个工作的plunkr在这里：http://plnkr.co/edit/ODe5QSOEvQsQiuBzs56o?p=preview

Answer 1

使用普通FormGroup。

form: FormGroup;
items: string[] = ['Banana', 'Apple', 'Beer', 'Water'];

this.form = new FormGroup({
  checkboxes: new FormGroup({ }),
});

this.items.forEach(item => {
  this.form.controls['checkboxes'].addControl(item, new FormControl(true));
});

循环items而不是FormArray。

<form [formGroup]="form.controls['checkboxes']">
    <div *ngFor="let item of items">
        <input type="checkbox" [formControlName]="item">
        <span>{{ item }}</span>
    </div>
</form>

Plnkr：http://plnkr.co/edit/qHjpejOhSfw25YHhJNqV?p=preview

Answer 2

这是使用formArray创建动态复选框并根据复选框选择更新formArray的另一种方法。为此，每个动态列表都有一个额外的选定属性

component.html

<div *ngFor="let item of formArray.controls;" [formGroup]="item">
    <mat-checkbox [formControl]="item.get('selected')">
          {{item.get("name")?.value}}
    </mat-checkbox>
</div>

component.ts

"items": [
{
  "name": "Banana",
  "selected": true
},
{
  "name": "Apple",
  "selected": false
}]

angular2 - 带复选框的FormArray

2 个答案: