title: Phoenix HTML - how to generate nested form
body: <p>I'm coming from PHP Symfony2 framework. Imagine you have models <code>User</code> and <code>Address</code></p>
  
  <pre class="lang-ruby prettyprint-override"><code>schema "users" do
    field :name, :string
    has_many :addresses, App.Address
  end
  </code></pre>
  
  <pre class="lang-ruby prettyprint-override"><code>schema "addresses" do
    field :street, :string
    field :city, :string
    ...
    belongs_to :user, App.User
  end
  </code></pre>
  
  <p>I want to create form for <code>User</code> with multiple <code>Address</code> subforms. I have already read <a href="http://blog.plataformatec.com.br/2015/08/working-with-ecto-associations-and-embeds/" rel="nofollow">Working with Ecto associations and embeds</a> which describes how to edit and remove items from collections. But there's nothing about adding new ones dynamically, I mean generating a subform for new <code>Address</code>. In Symfony there is something called <a href="http://symfony.com/doc/current/cookbook/form/form_collections.html#allowing-new-tags-with-the-prototype" rel="nofollow">"prototype"</a>, a simple function that generates form for item in collection. It generates inputs with names like <code>name="addresses[__name__][city]"</code>. Then I need to replace in JS <code>__name__</code> with proper index of item in collection. I didn't find any equivalent of that in Phoenix. </p>
  
  <p>I did an ugly code which works similar to Symfony's way:</p>
  
  <pre class="lang-slim prettyprint-override"><code>&lt;% {:safe, prototype}
    = form_for App.User.changeset(
        %App.User{addresses: [%App.Address{}]}
      ), "", fn f2 -&gt;
      inputs_for f2, :addresses, fn i2 -&gt;
        render("form_address.html", i: i2)
      end
    end
  %&gt;
  
  &lt;div data-prototype="&lt;%= prototype %&gt;"&gt;
    &lt;%= inputs_for f, :addresses, fn i -&gt; %&gt;
      &lt;%= render "form_address.html", i: i %&gt;
    &lt;% end %&gt;
  &lt;/div&gt;
  
  &lt;button type="button"&gt;
    Add address
  &lt;/button&gt;
  </code></pre>
  
  <p>When I click <em>Add address</em> JS replaces <code>[0]</code> and <code>_0_</code> in attributes of inputs (for example <code>name="addresses[0][city]"</code>) with proper indexes and adds new item in collection. It works, but is there any right way of doing this?</p>