Custom rendering of a “repeated” field from Symfony 2 in Twig

Question

I just started using Twig and I\'m trying to build a registration form. To add a password/re-enter password field I use the \"repeated\" filetype:

->add(\         


        

Answer 1

If you want to seperate both passwords field from a repeated method in your twig template you just have to call back their respective names like:

{{ form_label(form.password.pass, "Password :") }}
{{ form_widget(form.password.pass) }}

{{ form_label(form.password.confirm, "Confirm :") }}
{{ form_widget(form.password.confirm) }}

And of course in your function:

/..
->add('password', 'repeated', array(
'first_name' => 'pass',
'second_name' => 'confirm',
'type' => 'password'
))

Regards.

Answer 2

This works for me:

....
{{ form_errors(form.password.first) }}
<div class="form-field">
    {{ form_label(form.password.first, null, { 'attr': {'class': 'form-label'} }) }}
    {{ form_widget(form.password.first, { 'attr': {'class': 'form-input'} }) }}
</div>

{{ form_errors(form.password.second) }}
<div class="form-field">
    {{ form_label(form.password.second, null, { 'attr': {'class': 'form-label'} }) }}
    {{ form_widget(form.password.second, { 'attr': {'class': 'form-input'} }) }}
</div>
....

Answer 3

After a random guess I solved my own problem. I'll post it here so others who might come to this question by searching also know the answer:

{% for passwordField in form.password %}
    <div class="form-field">
        {{ form_label(passwordField, null, { 'attr': {'class': 'form-label'} }) }}
        {{ form_widget(passwordField, { 'attr': {'class': 'form-input'} }) }}
    </div>
{% endfor %}

Answer 4

If you are using Users Bundle they use the password.first and password.second, even better try using your profiler to see what variables comes from the view and controllers ;)

Answer 5

If you want to have application wide classes for your labels and inputs, you can customize how labels and widgets are rendered. Check http://symfony.com/doc/current/cookbook/form/form_customization.html

If you look at this file:

vendor/symfony/src/Symfony/Bridge/Twig/Resources/views/Form/form_div_layout.html.twig

You can see the defaults for all widgets. To achieve specifically what you need, you could override generic_label block to add form-label class:

{% block generic_label %}
{% spaceless %}
    {% if required %}
        {# We add form-label class in the next line! #}
        {% set attr = attr|merge({'class': attr.class|default('') ~ ' required form-label'}) %}
    {% endif %}
    <label{% for attrname,attrvalue in attr %} {{attrname}}="{{attrvalue}}"{% endfor %}>{{ label|trans }}</label>
{% endspaceless %}
{% endblock %}

And widget_attributes block to add form-input class:

{% block widget_attributes %}
{% spaceless %}
    {# We add form-input class in the next line! #}
    {% set attr = attr|merge({'class': attr.class|default('') ~ ' form-input'}) %}
    id="{{ id }}" name="{{ full_name }}"{% if read_only %} disabled="disabled"{% endif %}{% if required %} required="required"{% endif %}{% if max_length %} maxlength="{{ max_length }}"{% endif %}{% if pattern %} pattern="{{ pattern }}"{% endif %}
    {% for attrname,attrvalue in attr %}{{attrname}}="{{attrvalue}}" {% endfor %}
{% endspaceless %}
{% endblock widget_attributes %}

With these two templates all your inputs should render with the classes you need, without having to repeat the 'attr' parameters all over your forms.

I haven't tried it, but this should take care of the repeated field problem. Even if it didn't, you could create a repeated_widget and/or repeated_row template to customize how the repeated widget renders, thus fixing that widget for all the forms that use it.