如何 css 使用 bootstrap 和 twig 自定义 symfony 表单错误？

Question

对于 symfony 形式和 twig，我使用

{{ form_errors(form) }}

与 bootstrap_4_horizontal_layout.html.twig，它工作正常，输出如下：

<span class="alert alert-danger d-block"><span class="d-block">
                    <span class="form-error-icon badge badge-danger text-uppercase">Error</span> <span class="form-error-message">Error</span>
                </span></span>

但我需要对其进行自定义以翻译消息旁边的 bootstrap 错误标签。我在哪里可以自定义它？

Answer 1

您可以并且可能应该编写自己的表单主题并覆盖 form_errors 块以使其适应您的需要。作为参考：https://github.com/symfony/symfony/blob/537d373e0d8cb11fa70ddbe9559f2c4a741117a9/src/Symfony/Bridge/Twig/Resources/views/Form/bootstrap_4_layout.html.twig#L294

所以要实现您自己的表单主题，您只需要一个文件，比方说 my_form_style.html.twig:

{% extends "bootstrap_4_horizontal_layout.html.twig" %}

{# override the blocks you want ... or add some, this is the original #}
{%- block form_errors -%}
    {%- if errors|length > 0 -%}
        <span class="{% if form is not rootform %}invalid-feedback{% else %}alert alert-danger{% endif %} d-block">
            {%- for error in errors -%}
                <span class="d-block">
                    <span class="form-error-icon badge badge-danger text-uppercase">{{ 'Error'|trans({}, 'validators') }}</span> <span class="form-error-message">{{ error.message }}</span>
                </span>
            {%- endfor -%}
        </span>
    {%- endif %}
{%- endblock form_errors %}

然后您只需将表单主题设置为您的：

{% form_theme form "my_form_style.html.twig" %}

享受

如何 css 使用 bootstrap 和 twig 自定义 symfony 表单错误？

How to css customize symfony form errors with bootstrap and twig?

symfony

twig

bootstrap-4

symfony4