Angular 6 Reactive Forms Dynamic checkboxes

Question

For the life of me I cannot figure out how to get Angular 6 Reactive forms to play nice with dynamic checkboxes. I will try to post a simple senario.

lets say I have an AJAX call that returns the following type of data

{
    "name": "Name1",
    "items": [{type: "banna"}, {type: "apple"}]
},
{
    "name": "Name2",
    "items": [{type: "orange"}, {type: "strwberry"}]
}

I simple want to add 4 checkboxes, to the screen (which I can do many ways) but I dont know how to plug them up with reactive forms

I also need to rehydrate the form assuming it was an existing record from the database

How on this planet can this be done? Any example will do

What should the checkboxes be/do? What have you tried and what's the concrete problem? — JB Nizet
– JB Nizet, Commented Nov 7, 2018 at 22:57
They need to add values to an array. Like [“banana”,”apple”]. Based on the selected values. I have tried wack a mole with this. Currently I am trying to build a formarray dynamically adding form groups and form controls. To no avail — JCircio
– JCircio, Commented Nov 7, 2018 at 23:00
So you want to edit one of the objects you show in the question (not two), and you want your form to have 4 checkboxes: banana, apple, strawberry and orange, and if you check banana and oranege, then the object must have two items, one of type banana, and one of type orange. is that right? — JB Nizet
– JB Nizet, Commented Nov 7, 2018 at 23:04

JB Nizet · Accepted Answer · 2018-11-07 23:14:40Z

1

The model of the form doesn't have to match exactly with the structure of your object.

All you need to do is to create the appropriate structure in order to make it easy to edit it with checkboxes, and then, when you submit the form, transform it to the structure you want.

Before editing, transform

{
    "name": "Name1",
    "items": [{type: "banana"}, {type: "apple"}]
}

into

{
    "name": "Name1",
    fruits: {
        banana: true,
        apple: true,
        strawberry: false,
        orange: false
    }
}

by setting each fruit to true if there is an item of that type in the original object.

Mapping checkboxes to these 4 fruits is now simple, since the value of a checkbox is true or false.

Suppose the user edits the object by checking/unchecking checkbowes, and thus turns it into

{
    "name": "Name2",
    fruits: {
        banana: false,
        apple: true,
        strawberry: true,
        orange: false
    }
}

Now when submitting, you just need to transform that structure back into what you want:

{
    "name": "Name2",
    "items": [{type: "strawberry"}, {type: "apple"}]
}

by iterating through the keys of the fruits, filtering those that are true, and adding an item of that type to the array of items.

answered Nov 7, 2018 at 23:14

JB Nizet

694k94 gold badges1.3k silver badges1.3k bronze badges

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

4 Comments

JCircio Over a year ago

Interesting. After transforming the json what is the proper way to create the form? FormGroup with an array of form controls? That’s the part I’m confused on

JB Nizet Over a year ago

You can just use 4 form controls named banana, apple, strawberry and fruit, directly in the main form group, or inside of a nested form group.

JB Nizet Over a year ago

See stackblitz.com/edit/… for a live example.

JCircio Over a year ago

JB thanks a bunch.. not only did you explain it, your stackblitz was perfect. right on the money. Much appreciated

Faballion · Accepted Answer · 2018-11-08 00:01:32Z

0

On your template file, make sure you have an ngModel two-way binding on the checkbox that is of type boolean

  <mat-checkbox [(ngModel)]="isSubscribed[0].isChecked" color="accent">{{items[0].type}}</mat-checkbox>

Edit your data structure to include the values of those checkboxes

{
    "name": "Name1",
    "items": [{type: "banana", isChecked: false}, {type: "apple", isChecked: false}]
},
{
    "name": "Name2",
    "items": [{type: "orange", isChecked: false}, {type: "strawberry", isChecked: false}]
}

answered Nov 8, 2018 at 0:01

Faballion

111 silver badge5 bronze badges

Collectives™ on Stack Overflow

Angular 6 Reactive Forms Dynamic checkboxes

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related