Generates a HTML for collection of forms

Examples of use:

• Standard

  <%= formex_collection f, :user_addresses %>

• Set a form template for collection

  <div class="form-horizontal">
    <%= formex_collection f, :user_addresses, template: Formex.Template.BootstrapHorizontal %>
  </div>

• Use your render function

  <%= formex_collection f, :user_addresses, [template: Formex.Template.BootstrapHorizontal],
    fn collection -> %>
    <div class="form-horizontal">
      <%= formex_collection_items collection %>
      <%= formex_collection_add collection, "Add" %>
    </div>
  <% end %>

• You can also set a render function for collection item

  <% collection = fn collection -> %>
    <div class="form-horizontal">
      <%= formex_collection_items collection %>
      <%= formex_collection_add collection, "Add" %>
    </div>
  <% end %>
  
  <% collection_item = fn subform -> %>
    <%= formex_collection_remove {:safe, "&times;"}, "Are you sure you want to remove?" %>
    <%= formex_row subform, :street %>
    <%= formex_row subform, :city %>
  <% end %>
  
  <%= formex_collection f, :user_addresses, [template: Formex.Template.BootstrapHorizontal],
  collection, collection_item %>

Generated HTML

The formex_collection produces

<div class="formex-collection data-formex-prototype="..."></div>

The formex-prototype is used by JS to generate new subforms.

Content of .formex-collection is a result of a fun argument, which by default is:

<%= formex_collection_items collection %>
<%= formex_collection_add collection %>

The formex_collection_items produces

<div class="formex-collection-items"></div>

Content of .formex-collection-items is a result of a fun_item argument, which by default is:

<%= formex_collection_remove %>
<%= formex_rows subform %>

The final result may look like this:

<div class="formex-collection" data-formex-prototype=" result of `fun_item` ">

  <div class="formex-collection-items">

    <input name="user[user_addresses][0][id]" type="hidden" value="1">
    <div class="formex-collection-item">
      <input name="user[user_addresses][0][formex_delete]" type="hidden" value="false">
      <a class="formex-collection-item-remove" data-formex-confirm="Are you sure?" href="#">×</a>
      subform inputs
    </div>

    <input name="user[user_addresses][1][id]" type="hidden" value="9">
    <div class="formex-collection-item">
    <input name="user[user_addresses][1][formex_delete]" type="hidden" value="false">
      <a class="formex-collection-item-remove" data-formex-confirm="Are you sure?" href="#">×</a>
      subform inputs
    </div>

  </div>

  <button class="formex-collection-add" type="button">Add</button>

</div>