John Davidson

Message:

Purpose

I want to create a simple CMS based on EasyAdmin 4, where a user can build articles made of different content types, f.e. wysiwygs, galleries, quotations and others. It kind of works, but lacks a dynamic (ajax) approach for it.

Current code

I am building my FormType using this approach. For simplicity, there are just 2 types of content - wysiwyg and horizontal line.

In CRUD controller, there is this:

public function configureFields(string $pageName): iterable

{

    return [

        TextField::new('title'),

        CollectionField::new('content')

            ->setEntryType(ArticleContentType::class),

    ];

}

And in ArticleContentType, there is this:

public function buildForm(FormBuilderInterface $builder, array $options): void

{

    $builder

        ->add('type', ChoiceType::class, [

            'choices' => [

                'WYSIWYG Editor' => 'wysiwyg',

                'Horizontal line' => 'horizontal_line',

            ],

        ])

    ;



    $formModifier = function (FormInterface $form, $data = null) {

        if (is_array($data) && $data['type'] === 'wysiwyg') {

            $form->add('wysiwyg', TextareaType::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);

        }

    );

}

The problem

Solution above works, but only after saving an article (it shows wysiwyg when I select a WYSIWYG Editor option). Now I need to use some JavaScript to add the wysiwyg without saving/refreshing the article. I tried (as in the mentioned documentation) something like this:

fetch(document.getElementById('new-Article-form').action, {

  method: "POST",

  body: new FormData(document.getElementById('new-Article-form')),

}).then((r) => r.text())

but it fails in EasyAdmins's AbstractCrudController (Undefined array key "ea").

Is there anyone who managed to do this? Can somebody point me in the right direction?

Thank you.

---

My Answer:
> In order to achieve dynamic form modification for the CollectionField in EasyAdmin, you can use JavaScript to add or remove form fields based on user input. Here's an example of how you can modify the form dynamically:

1. Add a JavaScript file to your project that will handle the dynamic form modification. You can include this file in your template where the form is rendered.

2. In the JavaScript file, you can listen for changes in the form fields and add or remove form fields dynamically. For example, if the user selects "wysiwyg" from a dropdown, you can add a wysiwyg editor field to the form. If the user selects "horizontal line", you can add a horizontal line field to the form.

3. You can use AJAX to send requests to the server to fetch additional form fields or data based on user input. For example, if the user selects a specific option, you can make an AJAX request to fetch additional form fields for that option and dynamically add them to the form.

4. Make sure to handle form submission properly so that the dynamically added form fields are included in the form data that is sent to the server.

By implementing these steps, you can achieve dynamic form modification for the CollectionField in EasyAdmin and provide a more interactive user experience for building articles with different content types.