How to customize the data-prototype attribute in Symfony 2 forms

Question

Since umpteens days, I block on a problem with Symfony 2 and forms.

I got a form of websites entities. \"Websites\" is a collection of website\'s entities and each w

Answer 1

I've run into similar problem recently. Here's how you can override the collection prototype without having to explicitly set it in the html:

{% set customPrototype %}
    {% filter escape %}
        {% include 'AcmeBundle:Controller:customCollectionPrototype.html.twig' with { 'form': form.collection.vars.prototype } %}
    {% endfilter %}
{% endset %}
{{ form_label(form.collection) }}
{{ form_widget(form.collection, { 'attr': { 'data-prototype': customPrototype } }) }}

You can do whatever you want then in your custom twig. For example:

<div data-form-collection="item" data-form-collection-index="__name__" class="collection-item">
<div class="collection-box col-sm-10 col-sm-offset-2 padding-top-20">
    <div class="row form-horizontal form-group">
        <div class="col-sm-4">
            {{ form_label(form.field0) }}
            {{ form_widget(form.field0) }}
        </div>
        <div class="col-sm-3">
            {{ form_label(form.field1) }}
            {{ form_widget(form.field1) }}
        </div>
        <label class="col-sm-3 control-label text-right">
            <button data-form-collection="delete" class="btn btn-danger">
                <i class="fa fa-times collection-button-remove"></i>{{ 'form.collection.delete'|trans }}
            </button>
        </label>
    </div>
</div>

Useful when you only have to do it in specific places and don't need a global override that's applicable to all collections.

Answer 2

I had a somewhat similar issue. You might have to tweak this to work for your case, but someone may find it helpful.

Create a new template file to hold your custom form 'theme'

./src/Company/TestBundle/Resources/views/Forms/fields.html.twig

Normally, you can use the form_row function to display a field's label, error, and widget. But in my case I just wanted to display the widget. As you say, using the data-prototype feature would also display the label, so in our new fields.html.twig type your custom code for how you want the field to look:

{% block form_row %}
{% spaceless %}
        {{ form_widget(form) }}
{% endspaceless %}
{% endblock form_row %}

I removed the container div, and the label and error, and just left the widget.

Now in the twig file that displays the form, simply add this after the {% extends ... %}

{% form_theme form 'CompanyTestBundle:Form:fields.html.twig' %}

And now the form_widget(form.yourVariable.var.prototype) will only render the field and nothing else.

Answer 3

A bit old, but here is a deadly simple solution.

The idea is simply to render the collection items through a Twig template, so you have full ability to customize the prototype that will be placed in your data-prototype="..." tag. Just as if it was a normal, usual form.

In yourMainForm.html.twig:

<div id="collectionContainer"
     data-prototype="
         {% filter escape %}
             {{ include('MyBundle:MyViewsDirectory:prototype.html.twig', { 'form': form.myForm.vars.prototype }) }}
         {% endfilter %}">
</div>

And in MyBundle:MyViewsDirectory:prototype.html.twig:

<div>
    <!-- customize as you wish -->
    {{ form_label(form.field1) }}
    {{ form_widget(form.field1) }}
    {{ form_label(form.field2) }}
    {{ form_widget(form.field2) }}
</div>

Credit: adapted from https://gist.github.com/tobalgists/4032213

Answer 4

Here is sample code for custom data-prototype:

{{ form_widget(form.emails.get('prototype')) | e }}

where emails — your collection.

Answer 5

You probably have found out since but here is the solution for others.

Create a new template and copy/paste this code in it: https://gist.github.com/1294186

Then in the template containing the form you want to customise, apply it to your form by doing this:

{% form_theme form 'YourBundle:Deal:Theme/_field-prototype.html.twig' %}

Answer 6

I know that answer is very late but it maybe useful for visitors.

on your theme file you can simply use one block for rendering every collection entry of websites widget as following:

{% block _jobcast_profilebundle_websitestype_websites_entry_widget %}
     <div class="informations_widget">{{ form_widget(form.type.code) }}</div>
     <div class="informations_error">{{ form_errors(form.type) }}</div>
     <div class="informations_widget">{{ form_widget(form.url) }}</div>
     <div class="informations_error">{{ form_errors(form.url) }}</div>
{% endblock %}

also create theme block for your collection widget row as following:

{% block _quiz_question_answers_row %}
     {% if prototype is defined %}
        {%- set attr = attr | merge({'data-prototype': form_row(prototype) }) -%}
    {% endif %}

     {{ form_errors(form) }}

     {% for child in form %}
         {{ form_row(child) }}
     {% endfor %}
{% endblock %}

now the prototype and the rendered collection entry will be the same.