Symfony 4 - 无法在表单生成器中自定义表单字段的吸引力

Question

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

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

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

感谢您的帮助

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

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

如何创建表单类型，请参阅此处。