如何为Symfony 7表单添加可动态增删的字段？

1. 配置表单类型（主表单 + 子表单） #

先定义子表单类型，对应你需要新增的两个输入字段：

// src/Form/Type/OptionType.php
namespace App\Form\Type;

use Symfony\Component\Form\AbstractType;
use Symfony\Component\Form\FormBuilderInterface;
use Symfony\Component\OptionsResolver\OptionsResolver;
use App\Model\OptionDTO;

class OptionType extends AbstractType
{
    public function buildForm(FormBuilderInterface $builder, array $options): void
    {
        $builder
            ->add('label', null, [
                'label' => '选项标签',
                'attr' => ['placeholder' => '输入选项标签']
            ])
            ->add('value', null, [
                'label' => '选项值',
                'attr' => ['placeholder' => '输入选项值']
            ]);
    }

    public function configureOptions(OptionsResolver $resolver): void
    {
        $resolver->setDefaults([
            'data_class' => OptionDTO::class,
        ]);
    }
}

修改你的QuestionType，通过CollectionType实现动态字段组：

// src/Form/QuestionType.php
namespace App\Form;

use App\Form\Type\OptionType;
use App\Model\Question;
use Symfony\Component\Form\AbstractType;
use Symfony\Component\Form\FormBuilderInterface;
use Symfony\Component\OptionsResolver\OptionsResolver;
use Symfony\Component\Form\Extension\Core\Type\CollectionType;
use Symfony\Component\Form\Extension\Core\Type\SubmitType;

class QuestionType extends AbstractType
{
    public function buildForm(FormBuilderInterface $builder, array $options): void
    {
        $builder
            // 其他原有表单字段
            ->add('title', null, ['label' => '问题标题'])
            ->add('options', CollectionType::class, [
                'entry_type' => OptionType::class,
                'entry_options' => ['label' => false],
                'allow_add' => true,
                'allow_delete' => true,
                'prototype' => true,
                'prototype_name' => '__option_index__',
                'by_reference' => false,
                'label' => '选项',
                'attr' => ['class' => 'options-collection'],
            ])
            ->add('save', SubmitType::class, ['label' => '保存'])
            ->add('addOption', SubmitType::class, [
                'label' => '添加选项',
                'attr' => ['class' => 'add-option-btn'],
                'mapped' => false,
            ]);
    }

    public function configureOptions(OptionsResolver $resolver): void
    {
        $resolver->setDefaults([
            'data_class' => Question::class,
        ]);
    }
}

2. 模型类配置 #

确保主模型和子模型的属性与表单对应：

// src/Model/Question.php
namespace App\Model;

class Question
{
    private ?string $title = null;
    /** @var OptionDTO[] */
    private array $options = [];

    // 标题的getter/setter
    public function getTitle(): ?string
    {
        return $this->title;
    }

    public function setTitle(?string $title): self
    {
        $this->title = $title;
        return $this;
    }

    // 选项集合的操作方法
    public function getOptions(): array
    {
        return $this->options;
    }

    public function setOptions(array $options): self
    {
        $this->options = $options;
        return $this;
    }

    public function addOption(OptionDTO $option): self
    {
        if (!in_array($option, $this->options, true)) {
            $this->options[] = $option;
        }
        return $this;
    }

    public function removeOption(OptionDTO $option): self
    {
        $key = array_search($option, $this->options, true);
        if ($key !== false) {
            unset($this->options[$key]);
            $this->options = array_values($this->options);
        }
        return $this;
    }
}

子模型：

// src/Model/OptionDTO.php
namespace App\Model;

class OptionDTO
{
    private ?string $label = null;
    private ?string $value = null;

    public function getLabel(): ?string
    {
        return $this->label;
    }

    public function setLabel(?string $label): self
    {
        $this->label = $label;
        return $this;
    }

    public function getValue(): ?string
    {
        return $this->value;
    }

    public function setValue(?string $value): self
    {
        $this->value = $value;
        return $this;
    }
}

3. Twig模板与JS逻辑 #

渲染表单并实现动态增删的前端逻辑：

{# templates/question/form.html.twig #}
{% extends 'base.html.twig' %}

{% block body %}
    <h1>编辑问题</h1>

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

        <div class="options-container">
            {{ form_label(form.options) }}
            {{ form_errors(form.options) }}
            <div class="options-list" data-prototype="{{ form_widget(form.options.vars.prototype)|e('html_attr') }}">
                {% for option in form.options %}
                    <div class="option-item">
                        {{ form_widget(option) }}
                        <button type="button" class="remove-option-btn">删除</button>
                    </div>
                {% endfor %}
            </div>
        </div>

        {{ form_row(form.addOption) }}
        {{ form_row(form.save) }}
    {{ form_end(form) }}

    <script>
        document.addEventListener('DOMContentLoaded', () => {
            const optionsList = document.querySelector('.options-list');
            const addBtn = document.querySelector('.add-option-btn');
            let index = optionsList.children.length;

            // 添加选项逻辑
            addBtn.addEventListener('click', (e) => {
                e.preventDefault();
                const prototype = optionsList.dataset.prototype.replace(/__option_index__/g, index);
                
                const optionItem = document.createElement('div');
                optionItem.className = 'option-item';
                optionItem.innerHTML = prototype;

                const removeBtn = document.createElement('button');
                removeBtn.type = 'button';
                removeBtn.className = 'remove-option-btn';
                removeBtn.textContent = '删除';
                optionItem.appendChild(removeBtn);

                bindRemoveEvent(removeBtn);
                optionsList.appendChild(optionItem);
                index++;
            });

            // 绑定已有删除按钮事件
            document.querySelectorAll('.remove-option-btn').forEach(bindRemoveEvent);

            // 删除选项逻辑
            function bindRemoveEvent(btn) {
                btn.addEventListener('click', () => {
                    btn.parentElement.remove();
                });
            }
        });
    </script>
{% endblock %}

4. 控制器处理 #

正常处理表单提交即可，CollectionType会自动映射提交的字段组：

// src/Controller/QuestionController.php
namespace App\Controller;

use App\Model\Question;
use App\Form\QuestionType;
use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
use Symfony\Component\HttpFoundation\Request;
use Symfony\Component\HttpFoundation\Response;
use Symfony\Component\Routing\Annotation\Route;

class QuestionController extends AbstractController
{
    #[Route('/question/edit', name: 'app_question_edit')]
    public function edit(Request $request): Response
    {
        $question = new Question();
        $form = $this->createForm(QuestionType::class, $question);

        $form->handleRequest($request);
        if ($form->isSubmitted() && $form->isValid()) {
            // 执行保存逻辑（如存入数据库）
            return $this->redirectToRoute('app_home');
        }

        return $this->render('question/form.html.twig', [
            'form' => $form->createView(),
        ]);
    }
}

核心说明 #

• CollectionType的allow_add/allow_delete是动态增删的核心配置，prototype提供可克隆的字段组模板
• by_reference设为false，确保Symfony能正确修改模型中的数组/集合
• JS中必须阻止addOption按钮的表单提交行为，通过克隆prototype实现字段组新增

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