Form with nested array of fields without changeset in Phoenix 1.7

Phoenix Forum Questions / Help
, ,
1

Hello.

I’m working on a system with multiple different widgets in a dashboard. I don’t have widget specific schema, I would like to keep this only using a form definition as there is no need for any validation or complex logic.

But I’m struggling with adding a dynamic rows for a nested form, I can’t get it work with to_form functionality introduced in Phoenix 1.7.

my_form = to_form(%{ 
    "some_key" => "123",
    "properties" => [
      %{ "key" => "some_user_key", "value" => "some_user_value" },
      %{ "key" => "another_user_key", "value" => "another_user_value" }
    ]
  })

And I’m trying to setup the form for the nested properties

I’ve tried something like

<.inputs_for :let={f_nested} field={@my_form[:properties]} default={[]}>
  <.input name="key" field={f_nested[:key] />
  <.input name="value" field={f_nested[:value] />
</.inputs_for>

But this doesn’t work, it works if the properties would be a map, not an array.

I assume I need to iterate over the values, but not use how. Do I need to use inputs_for function instead of the component and iterate over the result?

What is a correct way just using the to_form achieve this? Or do I need to use ecto schemas to achieve this?

Thank you in advance.

2

It’s a little late, but I ran into a similar problem and found a solution.
It expects two-element tuples in the list. The first element is used only for sorting, and the second is the data for the nested form:

my_form = to_form(%{ 
    "some_key" => "123",
    "properties" => [
      {1, %{ "key" => "some_user_key", "value" => "some_user_value" }},
      {2, %{ "key" => "another_user_key", "value" => "another_user_value" }}
    ]
  })

Or you can use a map instead of a list (default attribute of inputs_for still must be a list)

my_form = to_form(%{ 
    "some_key" => "123",
    "properties" => %{
      1 => %{ "key" => "some_user_key", "value" => "some_user_value" },
      2 => %{ "key" => "another_user_key", "value" => "another_user_value" }
    }
  })
1 Like
3

Can you expand on this? I’m trying to do something similar. Whenever I pass a form to inputs_for it complains about the field not being one of embeds one, embeds_many,… . Ideally I just want to store a load of key value pairs in a map in the database. I don’t want the hassle of having to deal with embedded schemas.

4

I think this may be what you’re looking for:

https://hexdocs.pm/ecto/Ecto.Schema.html#module-the-map-type

5

Form:

form_data = %{
  "my_field" => %{
    "1" => %{
      "subfield1" => "value 1.1",
      "subfield2" => "value 1.2",
      "subfield3" => "value 1.3"
    },
    "2" => %{
      "subfield1" => "value 2.1",
      "subfield2" => "value 2.2",
      "subfield3" => "value 2.3"
    }
  }
}

socket = assign(socket, form_data: form_data)

Template:

<.form :let={form} for={@form_data}>
  <.inputs_for :let={subform} field={form[:my_field]} as={:my_field} default={[]}>
    <div class="row">
      <.input field=[subform[:subfield1] />
      <.input field=[subform[:subfield2] />
      <.input field=[subform[:subfield3] />
    </div>
  </.input>
</.form>