3_0.md

Rendering of nested forms

If you render difficult nested forms without the general form() function, but using a precision customization, in this case make sure that you have DOM elements for all the necessary form elements. For example, you have a form like in this entry with the next structure:

task:
    ...
    tags:
        collection:
            tag_1:
                name
            tag_2:
                name
            ...

If you render this form without any customization, just using the default form() function, in this case you will receive a structure like this:

<form name="form_task" method="post" action="" novalidate="novalidate">
    <div id="form_task">
        <div>
            <label class="required">Tags</label>
            <div id="form_task_tags" data-prototype="...">
                <div>
                    <label class="required">0</label>
                    <div id="form_task_tags_0">
                        <div>
                            <label for="form_task_tags_0_name" class="required">Name</label>
                            <input type="text" id="form_task_tags_0_name" name="form_task[tags][0][name]" required="required">
                        </div>
                    </div>
                </div>
                <div>
                    <label class="required">1</label>
                    <div id="form_task_tags_1">
                        <div>
                            <label for="form_task_tags_1_name" class="required">Name</label>
                            <input type="text" id="form_task_tags_1_name" name="form_task[tags][1][name]" required="required">
                        </div>
                    </div>
                </div>
            </div>
        </div>
        ...
</form>

As you see, all the tags are placed in the id=form_task_tags holder. This is important, because this element is an implementation of the direct form child tags, and it contains such importent data as prototype for each tag, also it can contains some validations rules which you have sent for the tags field in the Task entity.

For this reason, if you render this form manually, and do not create the #form_task_tags field:

{{ form_start(form) }}
    {{ form_row(form.description) }}

    <h3>Tags</h3>
    <ul class="tags">
        {% for tag in form.tags %}
            <li>{{ form_row(tag.name) }}</li>
        {% endfor %}
    </ul>
{{ form_end(form) }}

in this case you can lose important validation data.

So we suggest to add the ids manually:

{{ form_start(form) }}
    {{ form_row(form.description) }}

    <h3>Tags</h3>
    <ul class="tags" id="{{ form.tags.vars.id }}">
        {% for tag in form.tags %}
            <li id="{{ tag.vars.id }}">
                {{ form_row(tag.title) }}
            </li>
        {% endfor %}
    </ul>
{{ form_end(form) }}