Symfony 6：根据首个字段选择动态显示/隐藏表单字段

问题场景 #

• 需根据presenceEvent字段的选择（选中「Oui」/true），动态显示或隐藏presenceDejeuner和participerActivite字段
• Symfony表单验证依赖后端字段配置，但前端需要实现条件显示控制
• 尝试过Symfony表单事件（PRE_SET_DATA、PRE_SUBMIT等），仅在表单预填充数据时生效，当前场景无预填充需求
• 需要通过JavaScript动态修改目标字段的required属性，此前原生JS无法识别字段选择变化，原因是未正确定位Symfony自动生成的字段ID

解决方案 #

核心是通过浏览器开发者工具获取Symfony生成的表单字段ID，再编写原生JavaScript监听presenceEvent的选择变化，控制目标字段的显示/隐藏和必填属性。

步骤1：获取字段ID #

打开浏览器开发者工具，找到对应字段的HTML元素ID。Symfony生成的ID通常格式为form_presenceEvent（form是表单名称前缀，需根据实际项目调整）。

步骤2：编写JavaScript代码 #

在表单所在的模板文件中添加以下代码：

document.addEventListener('DOMContentLoaded', function() {
    // 替换为实际的字段ID
    const presenceEventSelect = document.getElementById('form_presenceEvent');
    const presenceDejeunerGroup = document.getElementById('form_presenceDejeuner').closest('.form-group');
    const participerActiviteGroup = document.getElementById('form_participerActivite').closest('.form-group');
    const presenceDejeunerSelect = document.getElementById('form_presenceDejeuner');
    const participerActiviteCheckboxes = document.querySelectorAll('#form_participerActivite input');

    // 页面加载时初始化字段状态
    toggleFields(presenceEventSelect.value);

    // 监听选择变化事件
    presenceEventSelect.addEventListener('change', function() {
        toggleFields(this.value);
    });

    // 控制字段显示/隐藏与必填属性的核心函数
    function toggleFields(selectedValue) {
        // Symfony将布尔选项true渲染为字符串'1'，false为'0'
        const isPresent = selectedValue === '1';

        // 切换字段容器的显示状态
        presenceDejeunerGroup.style.display = isPresent ? 'block' : 'none';
        participerActiviteGroup.style.display = isPresent ? 'block' : 'none';

        // 设置必填属性
        presenceDejeunerSelect.required = isPresent;
        participerActiviteCheckboxes.forEach(checkbox => {
            checkbox.required = isPresent;
        });
    }
});

关键说明 #

• Symfony会把布尔类型的Choice选项渲染为字符串'1'（对应true）和'0'（对应false），判断时要使用字符串值
• .form-group是Symfony表单默认的字段包装类，若项目用了自定义样式，需替换为对应的容器类
• 对于多选复选框的participerActivite，需要遍历所有复选框单独设置required属性

对应的Symfony表单类代码 #

<?php

namespace App\Form;

use App\Entity\Activite;
use App\Entity\Inscription;
use Symfony\Bridge\Doctrine\Form\Type\EntityType;
use Symfony\Component\Form\AbstractType;
use Symfony\Component\Form\FormBuilderInterface;
use Symfony\Component\OptionsResolver\OptionsResolver;
use Symfony\Component\Form\Extension\Core\Type\ChoiceType;

class InscriptionType extends AbstractType
{
    public function buildForm(FormBuilderInterface $builder, array $options): void
    {
        $builder
            ->add('presenceEvent', ChoiceType::class, [
                'choices' => [
                    'Oui' => true,
                    'Non' => false,
                ],
                'expanded' => false,
                'multiple' => false,
            ])
            ->add('presenceDejeuner', ChoiceType::class, [
                'choices' => [
                    'Oui' => true,
                    'Non' => false,
                ],
                'expanded' => false,
                'multiple' => false,
                'required' => false
            ])
            ->add('participerActivite', EntityType::class, [
                'mapped' => false,
                'class' => Activite::class,
                'choice_label' => 'activite',
                'multiple' => true,
                'expanded' => true,
                'required' => false
            ])
        ;
    }

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

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