角2多選擇框活性形式只返回一個值檢查

Question

我有以下代碼

Template: 

<div [formGroup]="booksFormGroup" class="btn-group" data-toggle="buttons"> 
    <ng-container *ngFor="let book of books"> 
     <label class="btn" [ngClass]="{'active': book.Id === selectedBookId}" 
      (click)="bookClicked(book.Id)"> 
      <input type="checkbox" class="toggle" [value]="book.Id" formControlName="buttonsBook">{{book.Name}} 
     </label> 
    </ng-container> 
</div> 
<button (click)=onClicked()>Click</button> 


TS file: 

this.buttonsBook = new FormControl(); 
this.booksFormGroup = new FormGroup({ 
    buttonsBook: this.buttonsBook, 
}); 

onClicked(){ 
    var selected = this.booksFormGroup.value.buttonsBook 
} 

當我點擊按鈕，我只得到了最後一個複選框，我查了一下，即使超過一個的值選擇。 我需要獲取所有選中的複選框值。

我看到了一些解決方案，但它們不是基於反應形式，而是基於模板和反應的混合，我不太喜歡。

Answer 1

問題是formControlName =「buttonsBook」對所有行都是一樣的。嘗試綁定每行的單個值。

嘗試這樣：

<input type="checkbox" class="toggle" [value]="book.Id" formControlName={{book.Id}}>{{book.Name}} 

Answer 2

您需要動態添加控件的HTML和TS喜歡跟着

Template: I have added formControlName as book.Id here 

<form [formGroup]="booksFormGroup" class="btn-group" data-toggle="buttons"> 
    <ng-container *ngFor="let book of books"> 
     <label class="btn" [ngClass]="{'active': book.Id === selectedBookId}" 
      (click)="bookClicked(book.Id)"> 
      <input type="checkbox" class="toggle" [value]="book.Id" formControlName="book.Id">{{book.Name}} 
     </label> 
    </ng-container> 
</form> 
<button (click)=onClicked()>Click</button> 

in TS: 

Similary I have added control for each book inside ngOnInit 

constructor(private fb: FormBuilder) 
this.booksFormGroup = this.fb.group({ 
}); 

ngOnInit(): void { 
this.books.forEach((book) =>{ 
this.booksFormGroup.addControl(book.id, new FormControl('')) 
}) 
} 
onClicked(){ 
    console.log(this.booksFormGroup.value); 
}