DestroyedSoul

DestroyedSoul

How to populate UI from @form contents

Hello,

I am new to LiveView, Phoenix and Elixir, and I am struggling to populate the UI from the form contents. Here’s a simplified version of what I have in my code:

I have defined a struct with some simple fields:

defmodule MyApp.MyStruct do
  defstruct some_integer: 3,
            some_string: "",
            some_bool: true
end

Then I have a context:

defmodule MyApp.Context do
  alias MyApp.MyStruct

  def current_struct() do
    %MyStruct{}
  end
end

It simply returns the newly created struct with default values. Now, I need to display a form populated with these values + allow modifying them. This is my _live.ex file:

defmodule MyAppWeb.ViewLive do
  alias MyApp.MyStruct
  use MyAppWeb, :live_view

  def mount(_params, _session, socket) do
    {:ok, assign(socket, form: to_form(Map.from_struct(Context.current_struct())))}
  end

  # Here I have handle_event methods, but they don't do anything at the moment.
end

Finally, this is the .heex file:

<div class="container mx-auto my-4">
  <.form for={@form} phx-change="change_form" phx-submit="submit_form">
    <!-- Number picker -->
    <div class="mb-4">
      <.label>I want to pick a number here:</.label>
    </div>
    <div class="flex items-center space-x-4 mb-4">
      <label class="cursor-pointer">
    <input type="radio" name="some_integer" value="3" class="hidden" checked={Context.current_struct().some_integer == 3}
    />
        <span class={"px-4 py-2 rounded-md #{if Context.current_struct().some_integer == 3, do: "bg-gray-400", else: "bg-gray-200"} hover:bg-gray-400"}>
          3 of something
        </span>
      </label>
      <!-- More of these integer options -->

    <!-- Checkbox -->
    <div class="mb-4">
      <.input
        label="I'd like this to be true or false:"
        type="checkbox"
        value={Context.current_struct().some_bool}
        field={@form[:some_bool]}
      />
    </div>

    <.button>Submit</.button>
  </.form>
</div>

The code above kind of works now for initial values, but it stops working when I select 7 or 10 instead of 3. Note how to get the value or compute background colours I use Context.current_struct() for calculations. I assume, that if I implement handle_event("change_form"...) and modify my current_struct() on each change and save it into the socket, then I could reference that saved struct in the heex template. But I would like to modify the actual struct only on submit, and in the meantime to get the data from the @form. I tried to do that, but failed.

When I try to do something like

value={@form[:some_bool]}

the code crashes.
When I try to use input_value(), then I always get nil, even if inspect(form) shows that both some_integer and some_bool have the values that I expect them to have.

Please advise me how I can achieve this.

Marked As Solved

sodapopcan

sodapopcan

Hiya and welcome!

It’s a bit hard to know for sure what is wrong without the exact code—for example, if Context.current_struct() is always returning a new struct (ie, without getting it from a database or something), then Context.current_struct().some_integer is always going to 3, even if you update the struct.

Another problem I see is that you are doing Map.from_struct which will return a map with atom keys. In order to use a map with a form, you need to use string keys. The console should be giving you a warning about this, though it’s easy to miss. Once you’ve done this, then @form[:field].value will work (note it’s an atom key in this case). As @codeanpeace noted, when using the <.input /> component then you don’t need to do this and you should remove the value attribute. In the case of the radio button that is using a raw html input, you will need to do this.

In your change handler, the updated fields will come through params which you can then construct into a new map, convert it to a form, and store that new form in assigns.

I should clarify I don’t have much experiencing using forms with raw maps beyond simple experimentation. They are much easier (and safer) to use with changesets.

Also Liked

codeanpeace

codeanpeace

Correct, if you really wanted to manually access the value of a Phoenix.HTML.FormField struct, you have to do something like @form[:some_bool].value.

Note that since you’re using the default .input functional component, you don’t need to manually specify the value here as it’s automatically derived from the Phoenix.HTML.FormField passed via field={@form[:some_bool]} – see below.

# `.input` functional component defined in the default `core_components.ex`
  def input(%{field: %Phoenix.HTML.FormField{} = field} = assigns) do
    assigns
    |> assign(field: nil, id: assigns.id || field.id)
    |> assign(:errors, Enum.map(field.errors, &translate_error(&1)))
    |> assign_new(:name, fn -> if assigns.multiple, do: field.name <> "[]", else: field.name end)
    |> assign_new(:value, fn -> field.value end) # note: value set here
    |> input()
  end

Where Next?

Popular in Questions Top

bsollish-terakeet
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
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
vertexbuffer
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
stefanchrobot
What’s the safe way to decode a JSON string into a struct? I want to avoid calling String.to_atom. Jason.decode can give me a map with st...
New
alice
Hey, Just curious what are the main benefits of Elixir compared to Clojure? When is Elixir more useful than Clojure and vice versa? Th...
New
gonzofish
I’m currently trying to understand how to join three tables using Ecto. All the examples I’ve seen use 2, so maybe I’m just missing somet...
New
LegitStack
I’m trying to make a websocket server in Phoenix or raw Elixir. I heard about gun, I think I could use cowboy, but since I’m not that sma...
New
chewm
Hi guys, nice to meet you to the whole forum, I’m new here, I’m trying to configure visual studio code for elixir, right now the intellis...
New
skosch
To my knowledge, put_in, Map.update etc. all have the one limitation of not automatically creating intermediate keys when needed (for exa...
New
jc00ke
Expanding on this topic: https://forum.elixirforum.net/t/map-typespec-question/19217 Let’s say I have a map with required and optional k...
New

Other popular topics Top

William
I would like to know that is there any online source for learning Phoenix Framework for building E-Commerce Store? Any advantage on build...
New
lessless
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
gshaw
What is the idiomatic way of matching for not nil in Elixir? E.g., First way: defp halt_if_not_signed_in(conn, signed_in_account) when...
New
openscript
Hello! Sorry for this astonishing simple question, but I’m really stuck. I try to set up the intellij-elixir plugin, but I don’t know ho...
New
Harrisonl
We have an ECS cluster with 4 services, where each task joins a single cluster, via discovery ECS discovery service. Currently when I de...
New
Jim
As a follow up to my earlier question: I have the code compiling and running but not getting a successful login from the rest server. ...
New
freewebwithme
Using vs code and installed ElixirLS: support and debugger. And I got an error popped up on start up says Failed to run ‘elixir’ comma...
New
rms.mrcs
Hi, I need to transform a list of numbers into a map where the keys are the indexes and the values are the original values of the list....
New
alice
Hey, Just curious what are the main benefits of Elixir compared to Clojure? When is Elixir more useful than Clojure and vice versa? Th...
New
qwerescape
Is there a way to get the call stack or stack trace at any point in the code? Not from exceptions, but an expression that returns how the...
New

We're in Beta

About us Mission Statement