Symfony 6表单集合报错后移除链接消失问题解决

问题根源：表单错误重新渲染时，服务器端生成的已有集合条目没有包含Remove链接，且原有JS只给动态新增的条目绑定删除功能，未处理页面加载时已存在的条目。

修复步骤 #

1. 修改Twig模板，为每个集合条目添加Remove链接 #

原来的模板直接渲染整个form.items集合，导致结构错误且没有Remove链接。改为遍历每个条目，手动添加Remove按钮：

{{ form_start(form) }}
{% if form_errors(form) %}
<div class="rounded-md p-2 border-red-300 bg-red-50 border mb-4">{{ form_errors(form) }}</div>
{% endif %}
<div>
    <ul class="items"
        data-index="{{ form.items|length > 0 ? form.items|last.vars.name + 1 : 0 }}"
        data-prototype="{{ form_widget(form.items.vars.prototype)|e('html_attr') }}">
        {% for item in form.items %}
            <li class="item">
                {{ form_label(item) }}
                {{ form_widget(item) }}
                {{ form_errors(item) }}
                {# 为每个已有条目添加Remove链接 #}
                <a href="#" class="remove">Remove</a>
            </li>
        {% endfor %}
    </ul>
</div>

<button type="submit" class="block w-full shadow-sm border-transparent bg-indigo-600 hover:bg-indigo-700 dark:bg-indigo-500 dark:hover:bg-indigo-400 text-white rounded-md border p-2 mt-4 mb-2">{{ 'Save'|trans }}</button>

{{ form_end(form)}}

2. 更新JavaScript，处理页面加载时的已有条目和新增条目 #

原有JS只处理动态新增的条目，现在需要添加初始化逻辑，给页面加载时已存在的Remove链接绑定删除事件，同时保留新增条目的功能：

const addTagLink = document.createElement('a')
addTagLink.classList.add('add')
addTagLink.href = '#'
addTagLink.innerText = 'Add'
addTagLink.dataset.collectionHolderClass = 'items'

const collectionHolder = document.querySelector('ul.items')
collectionHolder.appendChild(addTagLink)

// 通用函数：绑定所有Remove链接的删除事件
const bindRemoveLinks = () => {
    document.querySelectorAll('.remove').forEach(link => {
        // 先克隆节点避免重复绑定事件
        const newLink = link.cloneNode(true);
        link.replaceWith(newLink);
        
        newLink.addEventListener('click', (e) => {
            e.preventDefault();
            // 找到当前条目并移除
            newLink.closest('.item').remove();
        });
    });
};

// 页面加载完成后，初始化已有条目的删除功能
document.addEventListener('DOMContentLoaded', bindRemoveLinks);

const addFormToCollection = (e) => {
    e.preventDefault();
    const collectionHolder = document.querySelector('.' + e.currentTarget.dataset.collectionHolderClass);

    const item = document.createElement('li');
    item.classList.add('item');

    // 插入原型模板
    item.innerHTML = collectionHolder
        .dataset
        .prototype
        .replace(/__name__/g, collectionHolder.dataset.index);

    // 给新条目添加Remove链接
    const removeLink = document.createElement('a');
    removeLink.href = '#';
    removeLink.innerText = 'Remove';
    removeLink.classList.add('remove');
    item.appendChild(removeLink);

    collectionHolder.appendChild(item);
    collectionHolder.dataset.index++;

    // 重新绑定所有删除链接（包括新增的）
    bindRemoveLinks();
}

addTagLink.addEventListener("click", addFormToCollection)

关键说明 #

• Twig遍历集合条目：确保服务器端渲染的每个条目都自带Remove链接，解决表单错误刷新后无链接的问题。
• 通用绑定函数：统一处理页面加载时的已有条目和动态新增条目，避免重复绑定事件导致的异常。

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