brainlid

brainlid

Phoenix Blog Post: Making a CheckboxGroup Input

Phoenix 1.7.0 brings a lot of new things when we run mix phx.gen my_app. These new and cool ways of doing things aren’t automatically brought to existing projects because they come from the generators. Of the many new things we could bring to an existing project, we focus on the new approach to form input components. Why? Because it’s both cool and useful! This post builds a custom multi-select checkbox group input for selecting which tags to associate with a database record in our Phoenix application. It’s surprisingly easy and elegant!

Most Liked

LostKobrakai

LostKobrakai

I recently build something like this as well: Scratchpad | Benjamin Milde

One problem, which I didn’t see discussed in the blog post is that you cannot submit an empty list due to how inputs are serialized in html. So no way to unselect everything and have it save properly. I do have one workaround to that in my code, but there are a few ones with different tradeoffs.

brainlid

brainlid

I updated the article to support dealing with an empty list. This lets you assign tags and then remove all the tags.

Updates:

  • Tagging post - updated schema changeset functions to remove blank entries. Used by the UI.
  • This article - added a hidden input to always send a value. In this case, it sends "". The blank value is removed during processing. This is the fix.
  • gist - The gist was updated for the fix. Added the separate ChangesetHelpers file for a more complete solution in the gist.
brainlid

brainlid

Good catch! Thanks for bringing that to my attention!

Where Next?

Popular in Blog Posts Top

thiagoa
Hello everyone, I published the first post of a series which aims to TDD a full application under an Umbrella project. Each post will g...
New
ErlangSolutions
Hey all, it’s Erlang Solutions. We released loads of Elixir content from our senior developers last week in celebration of ElixirConf US...
New
aymanosman
This is a very short article about using AWS Systems Manager Parameter Store to load secret configuration in a simple way.
New
MarcinKasprowicz
What I genuinely value at my workplace is that I can easily explore new languages through internal mobility. Throughout my career within ...
#js
New
New
szajbus
Monaco is state-of-the-art browser-based code editor that powers VS Code. Let’s see how to integrate it with Phoenix LiveView using esbuild.
New
ragamuf
A little halloween hocus-pocus on the value proposition of having a reliable test suite in place. You are not scared, are you?
New
rrrene
In this series, we take a look at the different ways to organize, structure and execute a good “flow” in our Elixir programs. The latest...
New
gaggle
This post explores different ways to do test automation in Elixir, focusing on how to handle dependency injection — covering patterns, li...
New
lawik
One of the Erlang ecosystem’s spiciest nerd snipes are hot code updates. Because it can do it. In ways that almost no other runtime can.
New

Other popular topics Top

lanycrost
Hi everyone! I need implement if…else if…else condition from my elixir code, and anymore of this control flow structures not work proper...
New
JakeBecker
TL;DR: I’ve just released an implementation of Microsoft’s IDE-independent Language Server Protocol for Elixir. It adds language support ...
1140 51847 244
New
yurko
Here are few pieces of (common) Linux knowledge that we use for reasonably small one server apps. We use Ubuntu but this should work for ...
New
srinivasu
How to handle excepions in elixir? Suppose i have A, B, C ,D, E modules. and each module has get() function. A.get() method will call th...
New
yawaramin
In the Dialyzer docs ( http://erlang.org/doc/man/dialyzer.html#requesting-or-suppressing-warnings-in-source-files ), there is a way to tu...
New
aalberti333
As the title describes, I’m trying to run Enum.map() over a list of key/value pairs, where the value is a map. My data looks like this: ...
New
hariharasudhan94
I would like to know what is the best IDE for elixir development?
New
grych
Hi folks, Few months ago I have announced the proof-of-concept of the library to manipulate the browsers DOM objects directly from Elixi...
639 49522 488
New
chrismccord
As promised, the first release candidate of Phoenix 1.3.0 is out! This release focuses on code generators with improved project structure...
New
magnetic
Hey :wave:t3: Elixir community, I’ve been learning Elixir, and working on some side projects. My editor of choice is VSCode, and althoug...
New

We're in Beta

About us Mission Statement