I followed some online tutorials and got template code for taking list of list as input. I am using input helpers to create array of input field and added some code to parse form in controller. Currently my code looks like:
<div class="form-group">
<%= inputs_for f, :topics, fn tf -> %>
<%= label tf, :name, class: "control-label" %>
<%= array_input tf, :name %>
<%= error_tag tf, :name %>
<%= inputs_for tf, :links, fn lf -> %>
<%= label lf, :url, class: "control-label" %>
<%= array_input lf, :url %>
<%= error_tag lf, :url %>
<%= array_add_button f, :url %>
<% end %>
<%= array_add_button f, :name %>
<% end %>
</div>
Each topic has a name and a list of links and each link has a url. My input_helper looks like this:
def array_input(form, field) do
values = Phoenix.HTML.Form.input_value(form, field) || [""]
id = Phoenix.HTML.Form.input_id(form, field)
type = Phoenix.HTML.Form.input_type(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} ->
new_id = id <> "_#{index}"
input_opts = [
name: Phoenix.HTML.Form.input_name(form, field),
value: value,
id: new_id,
class: "form-control"
]
form_element(form, field, value, index)
end)
end
end
def form_element(form, field, value, index) do
type = Phoenix.HTML.Form.input_type(form, field)
id = Phoenix.HTML.Form.input_id(form, field)
name = Phoenix.HTML.Form.input_name(form, field)
new_id = id <> "_#{index}"
input_opts = [
name: name,
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
def array_add_button(form, field) do
id = Phoenix.HTML.Form.input_id(form, field)
content = form_element(form, field, "", "__name__")
|> safe_to_string
data = [
prototype: content,
container: container_id(id)
];
link("Add", to: "#", data: data, class: "add-form-field")
end
def container_id(id), do: id <> "_container"
Currently link is not nested inside topic in frontend and also add and remove button does not work properly. Do I need to create list of list in input_helper.ex itself ? Formex sounds good but I don’t want to add complexity as I am new to phoenix and web development as well.
