Check all checkboxes within a FormArray - Angular 2 Reactive Form

Question

I have an angular 2 reactive form with a list of checkboxes that are data bound. This works fine, but now I need to add a button to check all checkboxes.

Heres how my FormGroup is configured:

  private buildForm() {
    this.groupForm = this._formBuilder.group({
      bookId: this._formBuilder.control(null),
      startDate: this._formBuilder.control(null),
      groupTotal: this._formBuilder.control(null),
      chapterGrouping: this._formBuilder.control("all"),
      groupChapters: this.buildChapters()
    });
  } 

  private buildChapters() {
    const chapters = this.chapters.map(chapter => {
      return this._formBuilder.control(chapter.selected)
    });
    return this._formBuilder.array(chapters);
  }

Heres my HTML:

<div class="form-group">
    <label for="">Select chapters</label>
    <div *ngFor="let chapter of formChapters.controls; let i=index" class="checkbox">
        <label>
        <input type="checkbox"  [formControl]="chapter" >
        {{chapters[i].title}}
        </label>
    </div>
</div>

How would I access the FormArray to set all checkboxes as checked?

Koudela · Accepted Answer · 2017-08-18 12:32:05Z

9

Add a formGroupName and a formControlName to your template. (To let Angular 2+ know how the DOM and the formGroup structure relates.)
Delete [formControl]="chapter" from your template. (You don't need this.)
Add a button to your template.
Use the the value property (to get a valid array) and the setValue method (to feed the manipulated array back).

Your template will look like this:

<div class="form-group" formGroupName="groupChapters">
    <label for="">Select chapters</label>
    <div *ngFor="let chapter of formChapters.controls; let i = index" class="checkbox">
        <label>
            <input type="checkbox" formControlName="{{i}}">
            {{chapters[i].title}}
        </label>
    </div>
    <button (click)="checkAll()">Check all</button>
</div>

The method you add to your class:

private checkAll() {
    this.groupForm.controls['groupChapters'].setValue(
        this.groupForm.controls['groupChapters'].value
            .map(value => true);
    );
}

A working Plunk: http://embed.plnkr.co/8yXBn1DhboiIwRIv7AS0/

edited Aug 18, 2017 at 12:32

answered Aug 18, 2017 at 11:45

Koudela

1816 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

sykespro Over a year ago

Works perfectly! Thanks. I appreciate the explanation.

Collectives™ on Stack Overflow

Check all checkboxes within a FormArray - Angular 2 Reactive Form

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related