How to attach ngModel with dynamic number of checkboxes in Angular?

Question

I have a list which contains dynamic number of checkbox's, each is having id attribute.

<li *ngFor='let i of someArray'>
<input type="checkbox" id={{i}}>
</li>

I can assign each input checkbox if they are known previously by [(ngModel)] to those many number of variables.

But how to attach dynamic number of checkbox's with variables while preserving the concept of Two-Way binding.

I am using @angular/core 2.4.10.

Answer 1

You'd have to use FormArray for this.

import {FormGroup} from '@angular/forms';

constructor(private fb: FormBuilder) {}

public form: FormGroup = this.fb.group({
  checkboxes: this.fb.array([])
});

Then you can loop from the controls:

<li *ngFor='let control of form.checkboxes.controls; let i = index'>
  <input type="checkbox" id={{i}} [formControl]="control">
</li>

Then you can get the value by doing this.form.get('checkboxes').value.

Answer 2

Unlike @Chrillewoodz said, you're not forced to use the Form Array, although I recommend you to use it. Otherwise you can do

<li *ngFor='let box of someArray; let i = index'>
    <input type="checkbox" [id]="box" [(ngModel)]="someArray[i]">
</li>

Answer 3

FormArray can be used when you don’t know how many controls will be present or when you have dynamic elements in form.

FormArray is well explained in this stackoverflow answer