CODEWITHSUNDEEP
symfonytwigsymfony-formssymfony-2.4
Rufinus
Rufinus

Reputation: 30773

Symfony: How to avoid custom form-types getting wrapped in a div automatically?

UserType Form:

class UserType
{
    public function buildForm(FormBuilderInterface $builder, array $options)
    {
        $builder->add('email', 'email', ['label' => 'EMail']);
        // various other fields....
    }

    public function setDefaultOptions(OptionsResolverInterface $resolver)
    {
        $resolver->setDefaults(array(
            'validation_groups' => array('registration'),
            'data_class' => 'Vendor\Model\Entity\User',
        ));
    }

    public function getName()
    {
        return 'form_user';
    }
}

TutorType Form:

class TutorType extends Translate
{
    public function buildForm(FormBuilderInterface $builder, array $options)
    {
        $builder->add('user', new UserType(), ['label' => false]);

        $builder->add('school', 'entity', [
            'class' => 'Model:School',
            'property' => 'name',
            'label' => 'Label'
        ]);

        // Various other fields
        $builder->add('save', 'Submit');
    }

    public function setDefaultOptions(OptionsResolverInterface $resolver)
    {
        $resolver->setDefaults(array(
            //'validation_groups' => array('registration'),
            'data_class' => 'Vendor\Model\Entity\Tutor',
            'cascade_validation' => true,
        ));
    }

    public function getName()
    {
        return 'form_tutor';
    }
}

When rendering, the UserType is rendered inside a div, i cant find a way to overcome this.

The Form is rendered as

the result

<form name="form_tutor"
      method="post"
      action=""
      novalidate="novalidate"
      class="form-horizontal form-horizontal"
      id="form_tutor">
    <div id="form_tutor"
         novalidate="novalidate"
         class="form-horizontal">
        <div class="form-group">
            <div class="col-lg-10">
                <div id="form_tutor_user">
                    <div class="form-group">
                        <label class="col-lg-2 control-label aaaa required"
                             for="form_tutor_user_email">EMail</label>

                        <div class="col-lg-10">
                            <input type="email"
                                 id="form_tutor_user_email"
                                 name="form_tutor[user][email]"
                                 required="required"
                                 class="form-control" />
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="form-group">
            <label class="col-lg-2 control-label aaaa required"
                 for="form_tutor_tutorType">Type</label>

            <div class="col-lg-10">
                <select id="form_tutor_tutorType"
                     name="form_tutor[tutorType]"
                     class="form-control">
                    </select>
            </div>
        </div>

        <div class="form-group">
            <div class="col-lg-offset-2 col-lg-10">
                <button type="submit"
                     id="form_tutor_save"
                     name="form_tutor[save]"
                     class="btn btn-default">Speichern</button>
            </div>
        </div><input type="hidden"
             id="form_tutor__token"
             name="form_tutor[_token]"
             class="form-control"
             value="s6i6zPxJs7KU5CiEe8i6Ahg_ca8rc2t5CnSk5yAsUhk" />
    </div>
</form>

The form_tutor_user is wrapped in a own form-group div. I tried to overwrite the form_tutor_user_widget but this is one level to deep. (And only a quick fix, it should be globally applied to all form type - Classes)

How can i change the theme so all custom types are not wrapped with the default form_row template?

Or how do i know in twig when a "subform" is rendered? so i can decide to print the <div class="form-group"> when the child-node is not a subform, or skip it, if this is the case.

TIA

Upvotes: 10

Views: 7106

Answers (6)

tlorens
tlorens

Reputation: 552

Bootstrap 3.3.4 I ended up doing this.

They key part of this:

 <div class="{% if form.parent.parent is empty %}form-group{% endif %}{% if (not compound or force_error|default(false)) and not valid %} has-error{% endif %}">

Full template.

{% block form_row -%}
    <div class="{% if form.parent.parent is empty %}form-group{% endif %}{% if (not compound or force_error|default(false)) and not valid %} has-error{% endif %}">
        {% if form.parent.parent is null and label is not empty %}
            {{- form_label(form) -}}
        {% elseif label is empty %}
            {{- form_label(form) -}}
        {% endif %}
        {% if compound is empty %}<div class="{{ block('form_group_class') }}">{% endif %}
            {{- form_widget(form) -}}
            {{- form_errors(form) -}}
        {% if compound is empty %}</div>{% endif %}
    </div>
{%- endblock form_row %}

Upvotes: 1

Alice
Alice

Reputation: 1

Maybe it is not an elegant solution, however works for me, because I was also trying to find the solution.

As an example:

{% for custom_field in form.custom_fields %}
<div class="edit_custom">
{{ form_row(custom_field.name) }}
{{ form_row(custom_field.value) }}
</div>
{% endfor %}

<script>
$('.edit_custom').find('input').unwrap();
</script>

Upvotes: 0

Zephyr
Zephyr

Reputation: 1598

By default, in the base form theme:

{% block form_row %}
{% spaceless %}
    <div>
        {{ form_label(form) }}
        {{ form_errors(form) }}
        {{ form_widget(form) }}
    </div>
{% endspaceless %}
{% endblock form_row %}

And, for custom compound forms:

{% block form_widget_compound %}
{% spaceless %}
    <div {{ block('widget_container_attributes') }}>
        {% if form.parent is empty %}
            {{ form_errors(form) }}
        {% endif %}
        {{ block('form_rows') }}
        {{ form_rest(form) }}
    </div>
{% endspaceless %}
{% endblock form_widget_compound %}

Unless you changed something here, the DIV you see should come from either one or the other bit of template.

However, in your specfic example, if form_tutor_user_row is defined, the first bit is never used, and if form_tutor_user_widget is defined, the last bit is never used.

Back to your question. Your question is : "How can i change the theme so all custom types are not wrapped with the default form_row template?"

Here is the problem the way I see it: you want that your TOP forms (the form in which all sub-forms are included) all have a common way of rendering, in sections. Each section will be included in a DIV with class="form-group". You may want to throw in some additional rendering operations but I will limit myself to this to keep things simple.

What you need to do then is to create a specfic form type and make all your TOP forms inherit from this new form type. For instance:

class TopType extends AbstractType
{
    public function getName()
    {
        return 'top_form';
    }
}

... and an inherited form:

class MyFormType extends AbstractType
{
    public function buildForm(FormBuilderInterface $builder, array $options)
    {
        ...
    }

    public function getName()
    {
        return 'my_form';
    }

    public function getParent()
    {
        return 'top_form';
    }
}

As you can see, there is no need to make PHP inheritance for form theming inheritance to work.

Template-theming-wise (can I even say that?), if no specific form theming is set for my_form, Symfony will understand that the default form theme to use here is the form theme of top_form, that you can define as such:

{% block top_form_widget %}
{% spaceless %}
    {% for child in form %}
        <div class="form-group">
            {{ form_widget(child) }}
        </div>
    {% endfor %}
    {{ form_rest(form) }}
{% endspaceless %}
{% endblock top_form_widget %}

I should add that this is a problem I already encountered and solved. Tell me how that works for you.

Edit:

To sum it up, what you have to do is:

  • Create the TopType form type,
  • Add the top_form_widget block in your form theme,
  • For all your root forms (i.e. top-level forms, forms that have no parent), add a getParent() method that will return the name of your TopType form ("top_form")

Upvotes: 5

enterx
enterx

Reputation: 879

Try using form_themes.

First, in you parent template define the form theme:

{% form_theme form with ['BundleName:ControlerName:somesubform_form.html.twig'] %}

btw replace BundleName, ControllerName and somesubform with the proper names.

then render it with:

{{ form_row(form.somesubform) }}

Upvotes: -1

Elnur Abdurrakhimov
Elnur Abdurrakhimov

Reputation: 44851

I usually solve this problem by rendering the nested form's fields manually:

{{ form_row(form.tutor.school) }}
{{ form_row(form.tutor.user.email) }}

Probably that's not the most elegant solution, but it works for me and I haven't looked for an elegant one yet.

Upvotes: 3

egeloen
egeloen

Reputation: 5874

In theory, if you override the form_widget_compound block in a global form theme this way, it should work as you want:

// app/Resources/views/form.html.twig

{% block form_widget_compound %}
    {% if form.parent is empty %}
        <div {{ block('widget_container_attributes') }}>
        {{ form_errors(form) }}
    {% endif %}
    {{ block('form_rows') }}
    {{ form_rest(form) }}
    {% if form.parent is empty %}
        </div>
    {% endif %}
{% endblock %}

And register your form theme:

// app/config/config.yml
twig:
    form:
        resources:
            - "::form.html.twig"

Upvotes: 3

Related Questions