A few days ago, a friend asked me how I’d implement grouping checkbox behavior (selecting multiple checkboxes with a single click) using Angular Reactive Forms. He wanted to create something like this:
In this article, I want to share what I came up with. Let’s get started: First, let’s build our form, so that we have something to work it:
We create a FormGroup that contains one FormArray. For each item, we create a new FormControl and add it to our array. If you’re not familiar with the FormArray syntax I highly recommend reading the following article:
Angular Reactive Forms: The Ultimate Guide to FormArray
Now what we need is to create a tree structure so that we can loop our data and display it in the view as grouped sections. If we think about it, this is what we called a UI state. I like to keep the UI state in pipes, so I’ll create a reusable tree pipe.
We won’t go over the pipe code as it simple JS logic. The only thing worth knowing is that I added the index property to each item. We’ll see why in a second.
Now let’s create our form:
Nothing special here. We have a nested for loop where we display the group name and its children. We also use the index that we added to each item to get the corresponding item from our array.
At this point, we can un/check each one of the items, and it’ll be synced with our form. Now let’s add the group checkbox functionality.
We’ll create two directives. The first one is responsible for querying the group checkbox element and interacting with it:
The second one is responsible for interacting with the controls, and update the group checkbox value:
We have two queries — one for the controls, and one for the selectGroup directive. When the user clicks on the group checkbox, we loop over each control and call patchValue() passing the group checkbox value.
We listen to each control valueChanges and set the group checkbox value based on the value of all controls.
You can play with code here.
🚀 In Case You Missed It
Here are a few of my open source projects:
- Akita: State Management Tailored-Made for JS Applications
- Spectator: A Powerful Tool to Simplify Your Angular Tests
- Transloco: The Internationalization library Angular
- Forms Manager: The Foundation for Proper Form Management in Angular
- Cashew: A flexible and straightforward library that caches HTTP requests
And many more!
Follow me on Medium or Twitter to read more about Angular, Akita and JS!
Implementing Grouping Checkbox Behavior with Angular Reactive Forms was originally published in Netanel Basal on Medium, where people are continuing the conversation by highlighting and responding to this story.