Dynamic material checkboxes

Question

I have an array of services with following structure:

addonOptions[]
hasAddons
serviceId

addonOptions[] has objects with following structure

serviceId
addonName
addonId
isChecked

I loop through services and generate dynamic checkboxes where serviceIds match. Now I want to check the checkboxes by default in case isChecked is true. But the following is not working:

<ng-container *ngFor="let service of serviceOptions; let i = index">
    <label *ngIf="service.hasAddons"><b>AddOns</b></label>
    <p *ngFor="let addon of service.addonOptions">
        <ng-container *ngIf="service.serviceId == addon.serviceId">
            <md-checkbox
                formControlName="addonName"
                type="checkbox"
                [ngModel]="addon.isChecked"
                [checked]="true"
                (change)="selectServiceAddon($event.checked,addon)">
                    {{ addon.addonName }}
                </md-checkbox>
        </ng-container>
    </p>
</ng-container>

is this a reactive form? If so, your first issue is that you cannot capture several values with one formcontrol. — AT82, Oct 23 '17 at 13:37
yes it's reactive form, and issue is the same!! Could you please provide some help in that case? — Naila, Oct 23 '17 at 13:38
How did it go with the answers, did some answer solve your issue? :) — AT82, Nov 03 '17 at 07:08

AT82 · Answer 1 · 2017-10-23T14:11:37.667

You cannot capture a single value with a single formcontrol, what you want is a formArray, where we push the checked items. Here's a simplified example, where your data you are iterating looks like this:

addonOptions = [{addonName:"name1", isChecked: false},
                {addonName:"name2", isChecked: true},
                {...}]

When we build the form, we just declare an empty form array:

this.myForm = this.fb.group({
  addons: this.fb.array([])
});

Then if we actually don't need to care about the values until we submit the form, we can set the values to the form after submitting the form.

So in template we just iterate the array you have like so:

<div *ngFor="let addon of addonOptions">
  <input type="checkbox" [(ngModel)]="addon.isChecked" [ngModelOptions]="{standalone: true}"> 
     {{addon.addonName}}
</div>

and do not add any form control.

Upon submit, we filter the values that have isChecked as true and apply that filtered array as the formArray, like so:

onSubmit() {
  let formArr = this.addonOptions.filter(x => x.isChecked === true)
  this.myForm.setControl('addons', this.fb.array([...formArr]));
}

DEMO

If you want, you could also dynamically add/remove fields when checked/unchecked, then do a little spinoff of this: https://stackoverflow.com/a/43424244/6294072

score 0 · Answer 2 · answered Oct 23 '17 at 13:28

0

Could you try to use :

<md-checkbox 
  formControlName="addonName" 
  type="checkbox" 
  [checked]="addon && addon.isChecked" 
  (change)="selectServiceAddon($event.checked,addon)">
  {{addon.addonName}}
</md-checkbox>

answered Oct 23 '17 at 13:28

AsmaG

487
4
17

Would you try to make a plunker ? – AsmaG Oct 23 '17 at 13:36

Dynamic material checkboxes

2 Answers2