Symfony 4 - 使用 Select2 动态生成提交的表单

Question

我正在关注http://symfony.com/doc/current/form/dynamic_form_modification.html#dynamic-generation-for-submitted-forms的教程

我成功地重现了教程，一切正常。但是，当我在我的字段上应用“Select2”时，它不再起作用了。

表格：

class TicketAdminForm extends AbstractType
{

    public function buildForm(FormBuilderInterface $builder, array $options)
    {
        $builder
            ->add('Client', EntityType::class, [
                'class' => Clients::class,
                'choice_label' => 'name',
                'label' => "Client",
                'placeholder' => '',
                'attr' => ['data-provider' => 'select2'],
            ])
        ;

        $formModifier = function (FormInterface $form, Clients $client = null) {
            $entity = null === $client ? [] : $client->getEntities();

            $form->add('entity', EntityType::class, [
                'class' => 'App\Entity\Entity',
                'placeholder' => '',
                'choices' => $entity,
                'label' => 'Entité',
                'attr' => ['data-provider' => 'select2'],
            ]);
        };

        $builder->addEventListener(
            FormEvents::PRE_SET_DATA,
            function (FormEvent $event) use ($formModifier) {
                // this would be your entity, i.e. Clients
                $data = $event->getData();
                $form = $event->getForm();

                $formModifier($event->getForm(), $data->getClient());
            }
        );

        $builder->get('Client')->addEventListener(
            FormEvents::POST_SUBMIT,
            function (FormEvent $event) use ($formModifier) {
                // It's important here to fetch $event->getForm()->getData(), as
                // $event->getData() will get you the client data (that is, the ID)
                $client = $event->getForm()->getData();

                // since we've added the listener to the child, we'll have to pass on
                // the parent to the callback functions!
                $formModifier($event->getForm()->getParent(), $client);
            }
        );
    }

树枝：

{{ form_start(form, {'attr': {'class': 'form-horizontal'} }) }}
        <div class="box-body">
            {{ form_row(form.client) }}
            {{ form_errors(form.client) }}
            {{ form_row(form.entity) }}
            {{ form_errors(form.entity) }}
        </div>
        <!-- /.box-body -->

        <div class="box-footer">
            <div class="col-md-offset-2 col-sm-8">

                <button id="dropbutton" class="btn bg-ticketing btn-flat form-control" type="submit">
                    {{ 'Submit the ticket'|trans({}, 'TicketingBundle') }}
                </button>


            </div>
        </div>
        <!-- /.box-footer -->
        {{ form_end(form) }}
    </div>

    <script>
        var $client = $('#ticket_admin_form_client');
        // When client gets selected ...
        $client.change(function() {
            console.log('dans change');
            // ... retrieve the corresponding form.
            var $form = $(this).closest('form');
            // Simulate form data, but only include the selected client value.
            var data = {};
            data[$client.attr('name')] = $client.val();
            // Submit data via AJAX to the form's action path.
            $.ajax({
                url : $form.attr('action'),
                type: $form.attr('method'),
                data : data,
                success: function(html) {
                    // Replace current entity field ...
                    $('#ticket_admin_form_entity').replaceWith(
                        // ... with the returned one from the AJAX response.
                        $(html).find('#ticket_admin_form_entity')
                    );
                    // Entity field now displays the appropriate entities.
                }
            });
        });
    </script>

此代码仅在我删除表单中的 'attr' => ['data-provider' => 'select2'] 时才有效。

我试过了：

$('#ticket_admin_form_client').on("select2:selecting", function(e) { 
   console.log('test');
});

但它不起作用。

你有解决方案让它与 select2 一起工作吗？

Answer 1

很简单，在你的 ajax 方法中添加这个：

 $('#ticket_admin_form_entity').select2({});

在方法success 中这样：

// ...

$.ajax({
 // ...
 success: function(html) {
    
     $('#ticket_admin_form_entity').replaceWith(
        $(html).find('#ticket_admin_form_entity')
     );
     
     $('#ticket_admin_form_entity').select2({}); // Add this 
}

// ...

;)