boiserunner
Changeset with radio buttons
I have a LiveView that creates a changeset on mount and validate.
defp build_changeset(data) do
types = %{email: :string, distance_id: :integer}
changeset = {data, types} |> Ecto.Changeset.cast(%{}, Map.keys(types)) |> Ecto.Changeset.validate_required([:email, :distance_id])
changeset
end
And a simple form. It presents multiple options to the user, so I’m relying on a wrapping a radio
<.form as={:form} for={@changeset} :let={f} phx-change="validate" phx-submit="save">
<.input field={f[:email]} type="email" />
<%= for vd <- @distances do %>
<label
for={"form_distance_id_" <> to_string(vd.id)}>
<input type="radio" id={"form_distance_id_" <> to_string(vd.id)} name="form[distance_id]" value={vd.id} class="sr-only" />
<!-- various aesthetic elements -->
</label>
<% end %>
...
When I first click one of these labels, my validate event fires and I see params for my changeset:
Parameters: %{"_target" => ["form", "email"], "form" => %{"distance_id" => "23", "email" => "test@test.com"}}
However, if I start editing the email field, the distance_id is wiped away.
Parameters: %{"_target" => ["form", "email"], "form" => %{"email" => "test@test.com"}}
Without complete form values, I can only rebuild a partial changeset, thus wiping out prior user selections. Anything stand out?
Marked As Solved
benwilson512
Author of Craft GraphQL APIs in Elixir with Absinthe
Hey @boiserunner you need to set a checked attribute on the input that has the value you’ve set. Something like:
<input type="radio" ... checked={get_field(@changeset, :distance_id) == vd.id) />
2
Also Liked
boiserunner
Confirmed, this works.
Not a complete face-palm moment, but maybe like… 65%? 70%?
Thank you!
1
Popular in Questions
can someone please explain to me how Enum.reduce works with maps
New
To my knowledge, put_in, Map.update etc. all have the one limitation of not automatically creating intermediate keys when needed (for exa...
New
I believe there are people here who are dealing with CSV files import on the daily basis, and since Excel is a really popular tool there ...
New
Is there a way to rollback a specific migration and only that one ("skipping" all the other ones)?
Would
mix ecto.rollback -v 2008090...
New
I have VueJS GUIs with the project generated using Webpack.
I have Elixir modules that will need to be used by the VueJS GUIs.
I fore...
New
I’m not a pro in using Regex and can’t figure out why the following behaviour happens, especially if we take into account the difference ...
New
Forgive me if this is obvious, but how does one delete a database record WITHOUT selecting it first? https://hexdocs.pm/ecto/Ecto.Repo.h...
New
I have followed this StackOverflow post to install the specific version of Erlang.
And When I am running mix ecto.setup then getting fol...
New
Hi! May someone helps me, please!
I have two apps into an umbrella project: the first one is Database, which manages queries, and the se...
New
Hi!
Currently I want to submit a form by pressing the Enter key. However, since my input field is of type “textarea” this is just adds a...
New
Other popular topics
What is the difference between System.get_env and Application.get_env? For example, what are best practices to use one versus another.
New
Hey all,
I discovered Elixir and I love it. I always wanted to learn a functional programming and I intended to go for Haskell, but afte...
New
I am trying to figure out how Mix knows whether the environment is test, dev, or prod -- where is this set?
Thanks.
New
Forgive me if this is obvious, but how does one delete a database record WITHOUT selecting it first? https://hexdocs.pm/ecto/Ecto.Repo.h...
New
When I run the Plug and I recompile I wind up having to use Ctrl C to quit iex and start again. Witht the help of rlwrap I can use the cu...
New
I tried installing
elixir 1.11.2
erlang 23.3.4
via asdf in my zsh shell. Enabled the versions locally and globally.
When I list them ...
New
Why is it that the mnesia database isn’t the most preferred database for use in Elixir/Phoenix?
New
This post is a wiki (feel free to hit the edit button near the bottom right of this post to add your own changes!)
This post collects co...
New
Erlang/OTP 25 [erts-13.2.2] [source] [64-bit] [smp:8:8] [ds:8:8:10] [async-threads:1]
15:22:35.803 [error] gen_event {lager_file_backend...
New
Hi!
Currently I want to submit a form by pressing the Enter key. However, since my input field is of type “textarea” this is just adds a...
New







