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