Multiple fields in dynamic nested form

Phoenix Forum Questions / Help
,
1

Hello again,
I was reading this article from Medium on how to create an array input form and I would like to extend and modify the example to suit my needs but the code is not really well explained and I am struggling to understand it.

The example shows how to add a series of todo fields in a trello style sort of way with a single input field, what I would like to do is to replace that input field with a text field and a file upload field needed for my schema.
Now, from what I understand the code I need to modify is the helper, and I suspect it is the functions below that interest me, but help me god I have no idea where to put my hands ahah.

def array_input(form, field, attr \\ []) do
    default_attr = [
      count: 1
    ]
    merged_attr = attr ++ default_attr
    count = merged_attr[:count]
    values = Phoenix.HTML.Form.input_value(form, field) || []
    values = if Enum.count(values) >= count, do: values, else: List.duplicate("", count - Enum.count(values)) ++ values
    id = Phoenix.HTML.Form.input_id(form,field)
    content_tag :ol, id: container_id(id), class: "input_container", data: [index: Enum.count(values) ] do
      values
      |> Enum.with_index()
      |> Enum.map(fn {value, index} ->
        form_elements(form, field, value, index)
      end)
    end
  end

  defp form_elements(form, field, value ,index) do
    type = Phoenix.HTML.Form.input_type(form, field)
    id = Phoenix.HTML.Form.input_id(form,field)
    new_id = id <> "_#{index}"
    input_opts = [
      name: new_field_name(form,field),
      value: value,
      id: new_id,
      class: "form-control"
    ]
    content_tag :li do
      [
        apply(Phoenix.HTML.Form, type, [form, field, input_opts]),
        link("Remove", to: "#", data: [id: new_id], title: "Remove", class: "remove-form-field")
      ]
    end
  end

I’ve been staring at this page for a while now and I can’t make sense of it… aside from not doing what I need it it too, it really bugs me to have coed in my app I don’t understand… at all.

If anybody can help understand this or give me a few pointer it will be greatly appreciated :slight_smile:

P.S. I was reading in the forum about the Formex library and if I can’t make this work I guess I’ll try it… I just didn’t want to add another library if I can help it :slight_smile: