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.

Hi @DestroyedSoul welcome! Whenever you have an error, please always post the full error and stacktrace so that we don’t have to guess what it is.

Hello,
The error was something about not implemented Safe protocol. Basically, FormField is not a type you could assign to value.
But this is not the primary thing here, I mentioned that for “history”. The main question is how to extract a value for the field.

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

This is exactly where the problem is: the value is always nil.

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.

The string keys is what seemed to be a problem here.