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.

score 1 · Answer 1 · answered Jul 17 '17 at 11:07

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.

answered Jul 17 '17 at 11:07

Chrillewoodz

27,055
21
92
175

There is one edit which I have done to make it work.

techcomp

Jul 17 '17 at 14:05

@techcomp You just grab the form control and call `control.setValue(false)`, where `control` is a variable which holds the control. – Chrillewoodz Jul 18 '17 at 06:45

score 1 · Answer 2 · answered Jul 17 '17 at 11:26

1

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>

answered Jul 17 '17 at 11:26

Is there some way to not access it by index ? – techcomp Jul 17 '17 at 14:06
No, it throws an error because Angular tries to access dynamically created variables. You **need** to use the index if you don't want to use formArray. – Jul 17 '17 at 14:35

score 0 · Answer 3 · answered Jul 17 '17 at 11:55

0

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

answered Jul 17 '17 at 11:55

Kowsalya

1,378
16
25

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

3 Answers3