Symfony集合表单CollectionType原型布局与现有表单不一致问题求解

1. 自定义表单块的使用方式错误：Symfony的表单渲染自定义块需要提前通过form_theme指令声明，你将自定义块放在表单渲染的流程中，不会被Twig识别为表单主题块，无法应用到原型渲染上。
2. 现有布局逻辑不统一：数据库加载的第一条地址是你手动在for循环中写死了Bootstrap网格布局，而新增的原型是调用默认的form_widget渲染，没有套用你自定义的网格结构，导致布局不一致。
3. JS插入逻辑的容器问题：新增表单时你把原型内容塞进了<li>标签，没有匹配现有布局的容器结构，进一步导致样式错乱。

1. 声明表单主题：在模板继承语句下方添加表单主题声明，告知Twig当前模板内的自定义块会作用于注册表单。
2. 修正自定义表单块：调整块名、块内变量，将统一的地址表单布局写在块内，同时删除原有循环内重复的布局代码。
3. 调整原型渲染规则：将原型渲染方法从form_widget改为form_row，匹配自定义的条目块。
4. 优化JS插入逻辑：移除不必要的<li>容器，补充初始索引值，避免字段名索引重复。

{% extends 'base.html.twig' %}
{# 新增：声明当前模板作为表单主题 #}
{% form_theme registrationForm _self %}

{% block title %}Register{% endblock %}
{% block body %}

    {% for flashError in app.flashes('verify_email_error') %}
        <div class="alert alert-danger" role="alert">{{ flashError }}</div>
    {% endfor %}
    <div class="container">
    {{ form_start(registrationForm) }}
    <div class="form-group">{{ form_row(registrationForm.roles) }}</div>
    <div class="form-row">
        <div class="form-group col-md-6">{{ form_row(registrationForm.name) }}</div>
        <div class="form-group col-md-6">{{ form_row(registrationForm.firstname) }}</div>
    </div>
    <div class="form-row">
        <div class="form-group col-md-6">{{ form_row(registrationForm.email) }}</div>
        <div class="form-group col-md-6">{{ form_row(registrationForm.plainPassword, {
                label: 'Password'
            }) }}
        </div>
    </div>
    <div class="form-row">
        <div class="form-group col-md-4">{{ form_row(registrationForm.phone) }}</div>
        <div class="form-group col-md-4">{{ form_row(registrationForm.NISS, {label: 'NISS'}) }}</div>
        <div class="form-group col-md-4">{{ form_row(registrationForm.BCE, {label: 'BCE'}) }}</div>
    </div>

    <h3>Adresses</h3>
    {# 补充初始index属性，避免新增条目索引重复 #}
    <div class="adress" data-prototype="{{ form_row(registrationForm.adress.vars.prototype)|e('html_attr') }}" data-index="{{ registrationForm.adress|length }}">
        {% for adress in registrationForm.adress %}
            {# 直接调用form_row，自动套用自定义块的布局 #}
            {{ form_row(adress) }}
        {% endfor %}
    </div>

    <button type="button" class="add_item_link" data-collection-holder-class="adress">Add an adress</button>

    {{ form_end(registrationForm) }}
    </div>

    <script>
        const addFormToCollection = (e) => {
            const collectionHolder = document.querySelector('.' + e.currentTarget.dataset.collectionHolderClass);
            const item = document.createElement('div');
            item.innerHTML = collectionHolder.dataset.prototype.replace(
                /__name__/g,
                collectionHolder.dataset.index
            );
            collectionHolder.appendChild(item);
            collectionHolder.dataset.index++;
        };
        document.querySelectorAll('.add_item_link').forEach(btn => btn.addEventListener("click", addFormToCollection));
    </script>
{% endblock %}

{# 自定义地址条目渲染块，注意默认变量为form而非自定义的adress #}
{% block _registration_form_adress_entry_row %}
    <div class="form-group col-md-4">{{ form_row(form.type) }}</div>
    <div class="form-row">
        <div class="form-group col-md-4">{{ form_row(form.street) }}</div>
        <div class="form-group col-md-4">{{ form_row(form.housenumber) }}</div>
        <div class="form-group col-md-4">{{ form_row(form.additional_info) }}</div>
    </div>
    <div class="form-row">
        <div class="form-group col-md-3">{{ form_row(form.postalcode) }}</div>
        <div class="form-group col-md-3">{{ form_row(form.city) }}</div>
        <div class="form-group col-md-3">{{ form_row(form.region) }}</div>
        <div class="form-group col-md-3">{{ form_row(form.country) }}</div>
        {# 补充隐藏字段渲染，避免提交时数据缺失 #}
        {{ form_widget(form.latitude) }}
        {{ form_widget(form.longitude) }}
{% endblock %}

内容的提问来源于stack exchange，提问作者Pax