Formex v0.6.6 Formex.View.Collection
Helper functions for templating collection of forms.
See Type docs for example of use.
Summary
Types
Functions
formex_collection(form, item_name, options, fun, fun_item)
formex_collection(Formex.Form.t, Atom.t, List.t, fun :: (t -> Phoenix.HTML.unsafe), fun_item :: (Formex.t -> Phoenix.HTML.unsafe)) :: Phoenix.HTML.safe
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, "×"}, "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>
formex_collection_add(form_collection, label \\ "Add", class \\ "")
formex_collection_add(t, String.t, String.t) :: Phoenix.HTML.safe
formex_collection_remove(label \\ {:safe, "×"}, confirm \\ "Are you sure?")
formex_collection_remove(String.t, String.t) :: Phoenix.HTML.safe