Symfony form select2 ajax entities

I have a form field which is of type EntityType and it contains multiple towns. I want these towns to be obtained via Ajax remotely so I created a json request which returns the Towns I am looking for.

These towns return their id and name. The problem is they are not treated as Town entities, so the Form is not validated.

Form field:

->add('towns', EntityType::class, [
            'required' => false,
            'mapped' => false,
            'label' => 'Towns',
            'translation_domain' => 'forms',
            'class' => Town::class,
            'choices' => [],
            'multiple' => true,
            'placeholder' => 'Select towns'
])

Select javascript:

$(document).ready(function() {
        $('.townDynamicSelect').select2({
            minimumInputLength: 2,
            ajax: {
                url: '{{ path('app_getTowns') }}',
                dataType: 'json',
                processResults: function (data) {
                    return {
                        results: $.map(data, function (item) {
                            return {
                                text: item.name,
                                id: item.id
                            }
                        })
                    };
                }
            }
        });
    });

Json response:

public function getTowns(Request $request, TownRepository $townRepository){
    if ($request->isXmlHttpRequest() && !is_null($this->getUser())) {
        $term = $request->query->get('term');
        $towns = $townRepository->findMaxByInitials($term, 20);
        return $this->json($towns, 200, [], [
            'groups' => ['town_select'],
        ]);
    }
}

Everything works fine until I select the towns I want and I submit the form. I get this error:

SymfonyComponentFormExceptionTransformationFailedException

Unable to reverse value for property path "[towns]": Could not find all matching choices for the given values.

This is how the select block looks like after adding the towns.

<span class="select2 select2-container select2-container--default select2-container--below select2-container--focus" dir="ltr" data-select2-id="6" style="width: 1483px;">
   <span class="selection">
     <span class="select2-selection select2-selection--multiple" role="combobox" aria-haspopup="true" aria-expanded="false" tabindex="-1" aria-disabled="false">
     <ul class="select2-selection__rendered">
        <li class="select2-selection__choice" title="Town1" data-select2-id="32"><span class="select2-selection__choice__remove" role="presentation">×</span>Town1</li>
        <li class="select2-selection__choice" title="Town2" data-select2-id="33"><span class="select2-selection__choice__remove" role="presentation">×</span>Town2</li>
        <li class="select2-search select2-search--inline"><input class="select2-search__field" type="search" tabindex="0" autocomplete="off" autocorrect="off" autocapitalize="none" spellcheck="false" role="searchbox" aria-autocomplete="list" placeholder="" style="width: 0.75em;"></li>
     </ul>
     </span>
  </span>
  <span class="dropdown-wrapper" aria-hidden="true"></span>
</span>

Edit: this is what I’ve tried so far

$builder->addEventListener(FormEvents::PRE_SUBMIT, function (FormEvent $event) {
        $form = $event->getForm();
        $towns = $form->get('towns')->getData();

        $field = $form->get('towns');
        $options = $field->getConfig()->getOptions();

        $options['choices'] = $towns;

        $form->add('towns', EntityType::class, $options);
        $form->get('towns')->setData($towns);
    });

Source: Symfony Questions

Was this helpful?

0 / 0

Leave a Reply 0

Your email address will not be published. Required fields are marked *