CODEWITHSUNDEEP
angularangular-reactive-forms
Naila
Naila

Reputation: 280

Dynamic material checkboxes

I have an array of services with following structure:

addonOptions[] has objects with following structure

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>

Upvotes: 1

Views: 2399

Answers (2)

AVJT82
AVJT82

Reputation: 73357

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

Upvotes: 2

AsmaG
AsmaG

Reputation: 507

Could you try to use : 

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

Upvotes: 0

Related Questions