Angular 2 Multi select box reactive forms returns only last value checked

Question

I have the following code

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
}

When I click the button I only get the value of the last checkbox I checked even if more than one is selected. I need to get all of the selected checkboxes values.

I saw some solutions but they are not based on reactive forms but rather a mixture of template and reactive which I don't really like.

Possible duplicate of [Angular how to get the multiple checkbox value?](https://stackoverflow.com/questions/43423333/angular-how-to-get-the-multiple-checkbox-value) — P. Moloney, Aug 31 '17 at 12:36
@P.Moloney not a duplicate mate. Article you posted is a hack. Reactive forms shouldnt work that way — pantonis, Aug 31 '17 at 15:05
@pantonis maybe the answers aren't what you are looking for... Non the less it seems to me you are asking the same question. Perhaps you can be more specific in your question? — P. Moloney, Aug 31 '17 at 15:20
I might be subjective :P But the answers in link is not a hack. I don't know what you'd expect trying to capture multiple values with a single form control. A formcontrol holds one value, that's it. If you want an array, you need to use formarray. Other option is to push all values to the form initially either as form controls or in a formarray and then just toggle boolean checked/unchecked. But that is inserting unnecessary controls in form if not all are checked, so I'd still go with the answer in the link. — AT82, Sep 02 '17 at 07:55

Rohan Fating · Answer 1 · 2017-08-31T16:26:36.217

0

You need to dynamically add controls in html and ts like follow

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

edited Aug 31 '17 at 16:26

answered Aug 31 '17 at 15:35

Rohan Fating

2,135
15
24

1

```this.booksFormGroup.values``` returns undefined – pantonis Aug 31 '17 at 15:47
use this.booksFormGroup.value – Rohan Fating Aug 31 '17 at 16:26
I get the following https://1drv.ms/i/s!Ap6vT6kvVLZ0jFlmnTqGuXwRD76O but the checkboxes are not selected – pantonis Aug 31 '17 at 17:42
Check boxes are boolean in nature, you'll just have to use one of the workarounds...[https://plnkr.co/edit/t6foUba6Ce8aNO84AUSF](https://plnkr.co/edit/t6foUba6Ce8aNO84AUSF?p=info) – P. Moloney Sep 04 '17 at 07:39

score -1 · Answer 2 · answered Aug 31 '17 at 12:36

-1

The problem is the formControlName = "buttonsBook" is the same for all lines. Try to bind with individual value for each line.

Try something like this:

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

answered Aug 31 '17 at 12:36

Henrique Souza

49
4

and how do I get selected values afterwards? – pantonis Aug 31 '17 at 15:50

Angular 2 Multi select box reactive forms returns only last value checked

2 Answers2