Dynamic Forms Angular 2 - 複選框

Question

我是Angular 2中的新成員。我試圖根據https://angular.io/guide/dynamic-form擴展動態表單。我確實輸入了收音機並按需要工作。但是現在我試圖做複選框，但是有一個問題。我有一組複選框，如果某個複選框被選中，我只會得到布爾值。芽我需要值，複選框被選中。有我的運動員：https://plnkr.co/edit/EhtpprYdXIFmYJG7Lzxg

感謝您的幫助！

Answer 1

我希望這將是您的解決方案。

templet.html

<form [formGroup] = "myForm" (ngSubmit) = "confirmFlights(myForm.value)"> 
    <ng-template ngFor [ngForOf]="flightList" let-flight let-i="index" > 
    <input type="checkbox" [value]="flight.id" formControlName="flightid" 
     (change)="flightids[i]=[$event.target.checked,$event.target.getAttribute('value')]" > 
    </ng-template> 
</form> 

component.ts

flightids陣列將具有另一陣列這樣 [[真， 'ID_1']，[假， 'ID_2']，[true，則'id_3'] ...] 這裏true表示用戶檢查它，false表示用戶選中然後取消選中它。 用戶從未檢查過的項目不會被插入到數組中。

flightids = []; 
confirmFlights(value){ 
    //console.log(this.flightids); 

    let confirmList = []; 
    this.flightids.forEach(id => { 
     if(id[0]) // here, true means that user checked the item 
     confirmList.push(this.flightList.find(x => x.id === id[1])); 
    }); 
    //console.log(confirmList); 

} 

Answer 2

爲什麼它不工作：

，因爲你正在使用一個formControl鍵（question.key === '技能'）爲所有3個複選框。

<span *ngSwitchCase="'checkbox'"> 
    <p *ngFor="let opt of question.options"> 
     <input [formControlName]="question.key" 
     [id]="opt.key" type="checkbox" [value]="opt.key"> 
      <label>{{opt.value}}</label></p> 
</span> 

如何對付它：

您應該使用每個輸入（複選框）formControl關鍵，跟蹤模型的變化 - 這是形式如何角工作。

所以，如果你拆分您Checkbox.options到單獨複選框，它會工作：

在動態表單question.component.html變化複選框：

<span *ngSwitchCase="'checkbox'"> 
    <input [formControlName]="question.key" 
    [id]="question.key" type="checkbox" [value]="question.value"> 
</span> 

in question.service.ts更改複選框爲：

new CheckboxQuestion({ 
    key: 'fast', 
    label: 'Fast', 
    value: false, 
    order: 5 
}), 

這裏改變Plunker： https://plnkr.co/edit/2XIfMU?p=preview