时间戳

首页 > 解决方案 > Symfony Bootstrap 4 表单布局继承

forms - Symfony Bootstrap 4 表单布局继承

问题描述

我正在尝试覆盖 bootstrap_4_layout.html.twig 的某些字段，但我发现 radio_widget 块存在一些问题。我需要将 div 元素更改为标签，但是当我覆盖该块时，单选元素在视图中被复制。有问题的 div 是与类custom-control

{% block radio_widget %}
    {% set parent_label_class = parent_label_class|default(label_attr.class|default('')) %}
    {% if 'radio-custom' in parent_label_class %}
        {% set attr = attr|merge({class: (attr.class|default('') ~ ' custom-control-input')|trim}) %}
        <div class="custom-control custom-radio{{ 'radio-inline' in parent_label_class ? ' custom-control-inline' }}">
            {{ form_label(form, null, { widget: parent() }) }}
        </div>
    {% else %}
        {% set attr = attr|merge({class: (attr.class|default('') ~ ' form-check-input')|trim}) %}
        <div class="form-check{{ 'radio-inline' in parent_label_class ? ' form-check-inline' }}">
            {{ form_label(form, null, { widget: parent() }) }}
        </div>
    {% endif %}
{% endblock radio_widget %}

使用控制台分析 dom，我看到创建了两个带有custom-control类的元素。为什么？

在此处输入图像描述

标签： formssymfonybootstrap-4

解决方案

我找到了解决方案。我覆盖了块radio_widget并使用标签更改了 div 元素：

{% block radio_widget %}
    {% set parent_label_class = parent_label_class|default(label_attr.class|default('')) %}
    {% if 'radio-custom' in parent_label_class %}
        {% set attr = attr|merge({class: (attr.class|default('') ~ ' custom-control-input')|trim}) %}
        <label class="custom-control custom-radio{{ 'radio-inline' in parent_label_class ? ' custom-control-inline' }}">
            {{ form_label(form, null, { widget: parent() }) }}
        </label>
    {% else %}
        {% set attr = attr|merge({class: (attr.class|default('') ~ ' form-check-input')|trim}) %}
        <div class="form-check{{ 'radio-inline' in parent_label_class ? ' form-check-inline' }}">
            {{ form_label(form, null, { widget: parent() }) }}
        </div>
    {% endif %}
{% endblock radio_widget %}

然后我也覆盖了块checkbox_radio_label。在里面我替换了基本代码：

// ...
{{ widget|raw }}
// ...

和：

{% set attr = attr|merge({class: (attr.class|default('') ~ ' custom-control-input')|trim}) %}
<input type="radio" {{ block('widget_attributes') }}{% if value is defined %} value="{{ value }}"{% endif %}{% if checked %} checked="checked"{% endif %} />

有关引导 4 树枝块的参考，请参阅此链接： https ://github.com/symfony/symfony/blob/master/src/Symfony/Bridge/Twig/Resources/views/Form/bootstrap_4_layout.html.twig

推荐阅读