javascript - How can I dynamically display and update form fields in Symfony EasyAdmin? - Stack Overflow

admin管理员组

文章数量:1357678

I'm working on a Symfony 7 project with EasyAdmin, and I'm trying to allow users to build article pages with different types of content, such as text blocks, image blocks, blocks with links, etc. To achieve this, I want to dynamically modify the form using the Symfony documentation on dynamic form modification: Symfony Documentation.

Here's what I've done so far:

In my ArticleCrudController, I'm using a CollectionField to handle adding and removing blocks:

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

In the BlockType.php file, I add EventListeners to adjust the fields based on the selected type (text, link, etc.):

$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']);

I’m also adding some JavaScript inspired by the documentation to handle the form modification on the client side. Here’s the JS code I’m using to listen for changes and update the form:

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);
    });
});

The problem I'm facing is that, currently, when I change the value of the select dropdown, the new fields don't appear as expected. This is due to the errors that show up in the console. Specifically, the 405 Method Not Allowed error and the TypeError: Cannot read properties of null (reading 'innerHTML').

I tried to manually force the choice of the method, but it didn’t work.

I also tried to follow the JavaScript example from this post: (Dynamic form modification for CollectionField in EasyAdmin) since the author was trying to do the same thing as me, but I don’t fully understand the code and it didn’t work either.

As a workaround, I’ve displayed all possible fields for the block (such as text, link, etc.) without worrying about the selected type, and made every fields not required. Then, I hide the fields that don’t match the selected type. While this approach works initially, it’s not an ideal solution, and it leads to issues with maintainability and performance. I really want to find a proper solution where only the relevant field for the selected block type is shown, making the form more optimized and dynamic.

Has anyone encountered a similar issue or implemented a dynamic form modification like this before? If anyone has any suggestions or can help me resolve the errors , I’d greatly appreciate it!

本文标签： javascriptHow can I dynamically display and update form fields in Symfony EasyAdminStack Overflow