Symfony3动态表单复选框

Question

I have a form where I use a checkbox to filter an EntityType. When the form is first rendered, the checkbox is unchecked (false). When I check it, it correctly fires my AJAX, and my entity is updated with the correct subset.

However, when I then go to uncheck the checkbox, the new entities remain.

While going through the code, I've verified that the AJAX request is sending the proper true/false back to my form (the POST parameters in the profiler are correct to what I've sent).

Where everything goes sideways, is in the POST_SUBMIT listener. Through logging this, the $event->getForm()->getData() is always "1" or true. According to the docs , this should be the data that currently represents the form.

The checkbox as defined on my form:

$builder->add('businessAcct', CheckboxType::class, array(
    'required' => false,
    'label' => ' ',
    'label_attr' => array(
        'class' => 'middle',
    ),
)) ...

My listener:

$builder->get('businessAcct')->addEventListener(
    FormEvents::POST_SUBMIT,
    function (FormEvent $event) use ($planModifier) {
        $business = $event->getForm()->getData();

        $this->log->info($event->getForm()->getData()); // always produces 1 in profiler

        $planModifier($event->getForm()->getParent(), $business);
    }
);

My $planModifier for completeness ...

$planModifier = function (FormInterface $form, bool $business) {
    if ($business) {
        $plans = $this->em->getRepository('AppBundle:Plan')->findAllBusinessPlans();
        $placeholder = '- select business plan -';
    } else {
        $plans = $this->em->getRepository('AppBundle:Plan')->findAllResidentialPlans();
        $placeholder = '- select residential plan -';
    }
    $form->add('plan', EntityType::class, array(
        'class' => 'AppBundle:Plan',
        'choice_label' => 'description',
        'placeholder' => $placeholder,
        'choices' => $plans,
        'label' => 'Plan:',
        'label_attr' => array(
            'class' => 'text-right middle',
        ),
    ));
};

The AJAX code:

var $bus_acct = $('#businessAcct');
$bus_acct.click(function() {
    var $form = $(this).closest('form');
    var data = {};
    data[$bus_acct.attr('name')] = $bus_acct.is(':checked');
    $.ajax({
        url : $form.attr('action'),
        type: $form.attr('method'),
        data : data,
        success: function(html) {
            $('#plan').replaceWith(
                $(html).find('#plan')
            );
        }
    });
});

I've even tried use $event->getData(), but of course, it didn't work either.

I have other dynamic fields on this form, and those work flawlessly.

Any ideas as to why $event->getForm()->getData() is always '1', and not following my businessAcct checkbox?

Answer 1

Through reading others' issues on this matter, there are two common answers that I found.

Option 1: Change the CheckboxType into a ChoiceType:

->add('businessAcct', ChoiceType::class, array(
    'required' => true,
    'choices' => array(
        'Yes' => true,
        'No' => false,
    ),
    'label' => ' ',
    'label_attr' => array(
        'class' => 'middle',
    ),
))

.... Twig edits not shown ....

Option 2: Create a ViewTransformer for the Checkbox:

$builder->get('businessAcct')
    ->addViewTransformer(new CallbackTransformer(
        function ($normalized) {
            return ($normalized);
        },
        function ($submitted) {
            return ($submitted === '__false') ? null : $submitted;
        }
    ))
;

AJAX edit:

data[$bus_acct.attr('name')] = $bus_acct.is(':checked') ? 'true' : '__false';

What is going on here, by using the View Transformer, I'm sending back a string instead of a boolean. This is due to the limitations of browsers sending unchecked checkboxes back to servers. There is a good read here: https://github.com/symfony/symfony/issues/7139

I ended up using Option 2.