Handling Multiple Checkboxes in Angular Forms

This post assumes that you at least have some working knowledge of Angular reactive forms.

Let’s say this is our structure:

We need to transform this to an Angular form. Our goal is to render a list of skills with a checkbox that will be un/checked based on the selected key from each skill.

Let’s create the form:

Our form is just a group with one key — skills.

The buildSkills() method is responsible for —

1. Create an array of FormControls with an initial value based on the selected key from each skill.
2. Pass the array to the FormArray.

Let’s stop for a second and recognize the final structure without the form builder.

Now we can write the HTML.

The code is straightforward. We are just looping over the skills controls and binding each skill to a checkbox.

Tip: We can use the index to show additional information, for example, the skill name.

The final step is to map the form value to something that we can send to our server.

You can see the template driven approach in my forms cheat sheet post.

🚀 In Case You Missed It

• Akita: State Management Tailored-Made for JS Applications
• Spectator: A Powerful Tool to Simplify Your Angular Tests
• Transloco: The Internationalization library Angular

You can play with the code here.

Follow me on Medium or Twitter to read more about Angular, Akita and JS!