angular2 - 带有复选框的FormArray

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); 
}) 

但我们在这里看到，我只能specifiy在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)); 
}); 

Loop 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 
}]