Symfony EasyAdmin动态表单字段显示与更新问题求助

我正在开发一个基于Symfony 7和EasyAdmin的项目，想要实现让用户创建包含不同类型内容块的文章页面——比如文本块、带链接的块等等。我参考了Symfony官方的动态表单修改思路来实现这个功能，但目前遇到了一些问题，希望能得到大家的帮助。

我已经完成的工作： #

1. 在ArticleCrudController中配置CollectionField
   我用CollectionField来处理内容块的添加和删除：

   CollectionField::new('blocks', 'Blocs')
       ->renderExpanded(true)
       ->setEntryIsComplex()
       ->setEntryType(BlockType::class),
   

2. 在BlockType中添加事件监听器动态调整字段
   我在BlockType.php里给表单添加了事件监听器，根据选择的块类型（文本、链接等）来显示对应的字段：

   $builder
       ->add('type', ChoiceType::class, [
           'choices' => [
               'Text' => 'text',
               'Link' => 'link',
           ],
       ]);
   
   $formModifier = function (FormInterface $form, $data = null) {
       if (is_array($data) && $data['type'] === 'text') {
           $form->add('text', TextareaType::class);
       } elseif (is_array($data) && $data['type'] === 'link') {
           $form->add('url', UrlType::class);
       }
   };
   
   $builder->addEventListener(
       FormEvents::PRE_SET_DATA,
       function (FormEvent $event) use ($formModifier) {
           $data = $event->getData();
           $formModifier($event->getForm(), $data);
       }
   );
   
   $builder->get('type')->addEventListener(
       FormEvents::POST_SUBMIT,
       function (FormEvent $event) use ($formModifier) {
           $type = $event->getForm()->getData();
           $formModifier($event->getForm()->getParent(), $type);
       }
   );
   
   $builder->setAction($options['action']);
   

3. 编写JavaScript处理客户端动态更新
   我还写了一段JS代码，监听类型选择的变化，尝试在客户端触发表单更新：

   document.addEventListener('DOMContentLoaded', function() {
       document.querySelector('.btn.btn-link.field-collection-add-button').addEventListener('click', function() {
           setTimeout(() => {
               const form_select_type = document.getElementById('Article_blocks_0_type');
               if (form_select_type) {
                   const form = document.getElementById('new-Article-form');
                   const block_0 = document.getElementById('Article_blocks_0');
   
                   const updateForm = async (data, url, method) => {
                       const req = await fetch(url, {
                           method: method,
                           body: data,
                           headers: {
                               'Content-Type': 'application/x-www-form-urlencoded',
                               'charset': 'utf-8'
                           }
                       });
   
                       const text = await req.text();
                       return text;
                   };
   
                   const parseTextToHtml = (text) => {
                       const parser = new DOMParser();
                       const html = parser.parseFromString(text, 'text/html');
                       return html;
                   };
   
                   const changeOptions = async (e) => {
                       const requestBody = e.target.getAttribute('name') + '=' + e.target.value;
                       const updateFormResponse = await updateForm(requestBody, form.getAttribute('action'), form.getAttribute('method'));
                       const html = parseTextToHtml(updateFormResponse);
   
                       const new_block_0 = html.getElementById('Article_blocks_0');
                       block_0.innerHTML = new_block_0.innerHTML;
                   };
   
                   form_select_type.addEventListener('change', (e) => changeOptions(e));
               }
           }, 500);
       });
   });
   

遇到的问题： #

当我切换块类型的下拉选择时，对应的字段并没有正确显示出来。打开浏览器控制台后，我看到两个关键错误：

• 405 Method Not Allowed
• TypeError: Cannot read properties of null (reading 'innerHTML')

我尝试过手动指定请求方法，但没有效果。也找过类似的问题案例，看到有人做过相同的需求，但没完全理解对方的代码，照着试了也没能解决问题。

现在我用了一个临时的折中方案：把所有可能的字段都添加到表单里，设置为非必填，然后通过CSS隐藏当前类型不匹配的字段。但这个方案显然不够理想，后续维护和性能都会有问题。我非常希望能找到正确的实现方式，只在选择对应类型时才显示相应的字段，让表单更高效、更符合预期。

有没有人遇到过类似的问题，或者已经实现过这种动态表单的功能？如果有解决思路或者能帮我排查这些错误，我会非常感激！

备注：内容来源于stack exchange，提问作者Matthieu Le Verger