En Symfony2, lorsqu’on fait un formulaire que l’on veut ensuite manipuler avec du JQuery par exemple, il est utile de faire le rendu du data-prototype que l’on a au préalable paramétré dans le Formbuilder.
Donc, soit on utilise
{{ form_widget(form) }}
Soit, pour faire un rendu manuel (par exemple lorsqu’on manipule une collection que l’on veut afficher à sa manière), il faut utiliser le bout de code suivant :
{{ form_row(form.addresses.get('prototype'))|e }}
Exemple:
<form action="" method="post" {{ form_enctype(form) }}>
<!-- form_widget(form) -->
<div id="tabs">
<ul>
<li><a href="#fragment-1"><span>Main informations</span></a></li>
<li><a href="#fragment-2"><span>Addresses</span></a></li>
<li><a href="#fragment-3"><span>Misc.</span></a></li>
</ul>
<div id="fragment-1">
<h3>Main informations</h3>
{{ form_row(form.name) }}
{{ form_row(form.type) }}
{{ form_row(form.customer_code) }}
{{ form_row(form.provider_code) }}
</div>
<div id="fragment-2">
<h3>Addresses</h3>
<div id="thirdparty_addresses" data-prototype="{{ form_row(form.addresses.get('prototype'))|e }}"/>
{% set i = 0 %}
{% for child in form.addresses %}
{{ form_row(child.address, {'label': 'Address: '}) }}
{{ form_row(child.zipcode, {'label': 'Zip: '}) }}
{{ form_row(child.town, {'label': 'City: '}) }}
{{ form_row(child.country, {'label': 'Country: '}) }}
{{ form_row(child.department, {'label': 'Province: '}) }}
{{ form_rest(child) }}
{% set i = loop.index %}
{% endfor %}
<a href="#" class="jslink"> Add an address </a>
</div>
<div id="fragment-3">
{{ form_rest(form) }}
</div>
<input type="submit" />
</form>
C’est (mieux) expliqué ici :
https://github.com/symfony/symfony/pull/1724
Avec un gist ici : https://gist.github.com/1151134