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
I’ve read in another post that it may be possible with a router helper - but I couldn’t find an appropriate one, and tbh, I’m still just ...
New
Hello, can anybody help here..? I have a list of players and I what to delete an element, but every for loop the list is reverting to ori...
New
Original source of discussion: This topic on the Pragmatic Programmers’ Functional Web Development with Elixir, OTP, and Phoenix forum.
...
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 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
Hello all!
I am typing this post from my new MacBook Pro with the M1 chip. I’m loving it so far, and will probably use it as my daily dr...
New
i’m a new one to elixir
which editor can i use
vs code? or atom?
Thanks! :smiley:
New
Other popular topics
I am trying to figure out how Mix knows whether the environment is test, dev, or prod – where is this set?
Thanks.
New
Hi. I’ve noticed that Windows Powershell has it’s own IEX command and you cannot access Elixir’s IEX due to the conflict. This isn’t a cr...
New
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
Credo is smart enough to check for (something like) this:
assert length(the_list) == 0
with this response:
Checking if an enum is empt...
New
i’m a new one to elixir
which editor can i use
vs code? or atom?
Thanks! :smiley:
New
In the code below, if the create action is not set to accept “extra_key” as an input, it errors out with a message shown above. Is there ...
New
Categories:
Sub Categories:
Forums
Popular Tags
- #ecto
- #liveview
- #troubleshooting
- #learning-elixir
- #deployment
- #library
- #erlang
- #testing
- #genserver
- #mix
- #absinthe
- #remote-other
- #otp
- #plug
- #how-to-question
- #macros
- #postgres
- #channels
- #elixirconf
- #exunit
- #discussion
- #code-sync
- #javascript
- #podcasts
- #onsite
- #dialyzer
- #docker
- #authentication
- #umbrella
- #full-time-contract
- #podcasts-by-brainlid
- #ecto-query
- #elixir-ls
- #phoenix_html
- #iex
- #blog-post
- #graphql
- #genstage
- #ai
- #websockets
- #supervisor
- #elixirconf-us
- #advent-of-code
- #distillery
- #processes
- #api
- #forms
- #metaprogramming
- #security
- #hex










