Symfony 4 - Can not customize attr for form field in formBuilder

Question

I have a feature that allows me to round the corners of my buttons with this code:

<input type="checkbox" class="custom-control-input" id="toggle-border-radius">
<label class="custom-control-label" for="toggle-border-radius">Border radius</label>

which will call this JS script :

// toggle border radius
    $("#toggle-border-radius").change(function (e) {
        e.preventDefault();
        $('.page-wrapper').toggleClass("boder-radius-on");
    });

But this is manually written code and I would like to use a real form and keep the same functionality. So I created my form with the formBuilder like this:

//... other fields
->add('activeBorderRadius', CheckboxType::class, [
                'required' => false,
                'label' => "Bords arrondis",
                'label_attr' => [
                    'class' => 'custom-control-label',
                    'for' => 'toggle-border-radius'
                ],
                'attr' => [
                    'class' => 'custom-control-input',
                    'id' => 'toggle-border-radius'
                ],
            ])

But when I load the page, the JS script doesn't work. And when I inspect the source code, I find this :

<input type="checkbox" id="parametres_sidebarOptions_activeBorderRadius" name="parametres[sidebarOptions][activeBorderRadius]" class="custom-control-input form-check-input" value="1">

<label class="custom-control-label form-check-label" for="parametres_sidebarOptions_activeBorderRadius">Bords arrondis</label>

Why can't I have the attributes that I choosen ?

Thanks for your help

Answer 1

You can also pass parameters to form fields when you render the form

{{ form_row(form.activeBorderRadius, {'attr': {'class': 'custom-control-input', 'id': 'toggle-border-radius'}}) }}
{{ form_label(form.activeBorderRadius, {'attr': {'class': 'custom-control-label', 'for': 'toggle-border-radius'}}) }}

Answer 2

You can use a "class" rather than an ID.

$(".custom-control-input").change(e => {
    e.preventDefault();
    $('.page-wrapper').toggleClass("boder-radius-on");
});

If you still want to use ID, you can create your own type in which you specify your code:

{% block you_widget %}
    {% set _class = '' %}
    {% if attr.class is defined %}
        {% set _class = ' class="' ~ attr.class ~ '"' %}
    {% endif %}
    {% set _label_class = '' %}
    {% if label_attr.class is defined %}
        {% set _label_class = ' class="' ~ label_attr.class ~ '"' %}
    {% endif %}
    <input type="checkbox" id="{{ id }}" name="{{ full_name }}"{{ _class }}>
    <label for="{{ id }}"{{ _label_class }}></label>
    <script>
        $('{{ id }}').change(e => {
            e.preventDefault();
            $('.page-wrapper').toggleClass('border-radius-on');
        });
    </script>
{% endblock you_widget %}

How to create your form type see here .