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

New
paulanthonywilson
https://furlough.merecomplexities.com/elixir/otp/tdd/2021/03/18/test-driving-otp-creating-a-registry-with-expiring-entries.html Followin...
New
New
brainlid
There is a new community resource available on writing “Safe Ecto Migrations”. When we get a migration wrong, it can lock up your product...
New
marcin
Hi! :wave: I wanted to refresh my knowledge on how to mix phx.gen.auth with local password users db, as well as OAuth providers such as ...
New
wmnnd
Hey there, I’ve started a little blog series about building and deploying Elixir applications. Now I would like to share with you the f...
New
aymanosman
The desire to produce structured logs is common. In this article, I will survey the major approaches one could take to achieve this goal ...
New
brainlid
Dialyzer is a tool that you’ve probably heard about in the Elixir community. You may have even used it. However, adding Dialyzer to an ex...
New
rocket4ce
A comprehensive guide for deploying Phoenix 1.8 applications using Coolify on Hetzner servers. Covers server setup, Coolify configuration...
New
New

Other popular topics Top

sorentwo
Hello! tl;dr Announcing Oban, an Ecto based job processing library with a focus on reliability and historical observability. After spen...
977 41022 311
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
sergio_101
I am VERY much an elixir newbie. I have taken one elixir course and one phoenix course on Udemy. During that course, I saw the instructor...
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
aadeshere1
I have a another noob question about loop. Since elixir is immutable, while loop is not directly possible. total = 10 while total != 0 ...
New
shahryarjb
Hello, I have map which I want to convert it to string like this: the map: %{last_name: "tavakkoli", name: "shahryar"} the string I ne...
New
chrisalley
ExUnit now has describe blocks which is a welcome addition coming from RSpec. In the docs, it states that nested hierarchies of describe ...
New
beno
I will often find my self writing things similar to: case some_value do nil -> something() "" -> something() _ -> someth...
New
Fl4m3Ph03n1x
About me? ( if you have nothing better to do than reading about some random guy in the internet :stuck_out_tongue: ) Hello all, this is ...
New
josevalim
Hi everyone, One of the features added to Elixir early on to help integration with Erlang code was the idea of overridable function defi...
New

We're in Beta

About us Mission Statement