Required depends on radio button

Question

I try to have a required value depends on radio button

$builder
            ->add('radio',ChoiceType::class,[
                'label' => 'My radio button',
                'choices'=>[
                    'Yes'=>'Yes',
                    "No"=>"No"
                ],
                "expanded"=>true,
                "multiple"=>false,
                'required' => true,
                'placeholder' => false
            ])
            ->add('file input', FileInputType::class, [
                'label' => 'put your file',
                'mapped' => false,
                'required' => true or false // depends on radio button
            ])

But i can't find how to do this, i'm a beginner in symfony. I use Symfony 5

Please if you have an idea i'm listening

Answer 1

You can use JavaScript to handle the change event on the radio buttons and set required attribute for the 'file input' field accordingly.

$builder
    ->add('radio', ChoiceType::class, [
        'label' => 'My radio button',
        'choices' => [
            'Yes' => 'Yes',
            'No' => 'No'
        ],
        'expanded' => true,
        'multiple' => false,
        'required' => true,
        'placeholder' => false,
        'attr' => [
            'id' => 'radio_choice'
        ]
    ])
    ->add('file_input', FileType::class, [
        'label' => 'Put your file',
        'mapped' => false,
        'required' => false, // Initially set to false
        'attr' => [
            'id' => 'file_input'
        ]
    ]);

// main.js
document.addEventListener('DOMContentLoaded', function() {
    const radioButtons = document.querySelectorAll('#radio_choice input[type=radio]');
    const fileInput = document.getElementById('file_input');

    function updateFileInputRequired() {
        // Set the 'required' attribute based on the selected radio button value
        fileInput.required = [...radioButtons].some(radio => radio.checked && radio.value === 'Yes');
    }

    // Add a change event listener for each radio button
    radioButtons.forEach(radio => {
        radio.addEventListener('change', updateFileInputRequired);
    });

    // Update the 'required' attribute when the page loads
    updateFileInputRequired();
});

Answer 2

There are a few steps you have to implement to achieve this feature.

1. Implement form events FormEvents::PRE_SET_DATA and FormEvents::PRE_SUBMIT.
2. PRE_SET_DATA is used for rendering form with existing data. For example: If Radio YES then display the file_input field otherwise another field is rendered in form.
3. PRE_SUBMIT is used for set field value based on Radio input. You can add logic here. For example: If YES, then set file_input field value.
4. Implement javascript code onChange event on the Radio field and handle show/hide events on other fields.

Note: In Symfont form, If you change anything from the js side then it will not work when the form is submitted. That's why we have to handle the same logic via FORM EVENTS