Symfony 4 - 无法在 formBuilder 中自定义表单字段的属性答案

【问题标题】：Symfony 4 - Can not customize attr for form field in formBuilderSymfony 4 - 无法在 formBuilder 中自定义表单字段的属性
【发布时间】：2020-04-23 09:37:44
【问题描述】：

我有一个功能，可以让我使用以下代码使按钮的角变圆：

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

会调用这个 JS 脚本：

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

但这是手动编写的代码，我想使用真实的表单并保持相同的功能。所以我使用 formBuilder 创建了我的表单，如下所示：

//... 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'
                ],
            ])

但是当我加载页面时，JS 脚本不起作用。当我检查源代码时，我发现：

<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>

为什么我不能拥有我选择的属性？

感谢您的帮助

【问题讨论】：

请添加你的树枝。你是如何渲染表格的？此外，javascript 似乎是错误的...如果您可以添加屏幕截图以直观地了解您想要的内容并稍微描述一下。

标签： javascript php symfony builder attr

【解决方案1】：

您也可以在渲染表单时将参数传递给表单字段

{{ 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'}}) }}

【讨论】：

【解决方案2】：

您可以使用“类”而不是 ID。

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

如果您仍想使用 ID，您可以创建自己的类型，在其中指定您的代码：

{% 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 %}

如何创建您的表单类型参见here。

【讨论】：