如何在Twig模板中的“form_row”上添加CSS类

Question

我想知道如何在Twig的"{{ form_row() }}"上添加CSS类。目前，我的代码是这样的：

{{ form_row(form.username, {'label' : "Login", 'attr': {'class': 'loginForm'}}) }}

...但是CSS类"loginForm"没有在HTML代码中使用。

谢谢 :)！

- axool

---

你可以使用form_widget作为解决方法。看起来它应该可以与form_row一起使用，但我还没有深入研究过。 - Cerad

我想在同一个form_row中使用'label'和'attr'。谢谢！ - Rodolfo Velasco

Answer 1

如果你想为form_row（即form_label、form_widget和form_errors的共同类）指定一个共同的class，你应该自定义一个field_row块。

本文介绍了如何自定义表单字段：如何自定义表单渲染。有一些方法可以实现这个目的。

例如，我使用的是第二种方法 (如何自定义表单渲染：第二种方法):

{% extends 'form_div_layout.html.twig' %}

{% block field_row %}
{% spaceless %}
    {% set class='' %}
    {% if attr.class is defined %}
    {% set class = 'class="' ~ attr.class ~ '"' %}
    {% endif %}

    <div {{ class }} >
        {{ form_label(form, label|default(null)) }}
        {{ form_errors(form) }}
        {{ form_widget(form) }}
    </div>
{% endspaceless %}
{% endblock field_row %}

- nni6

---

值得注意的是，您可能需要使用{{ class|raw }}才能使其正常工作，而不会尝试转义双引号。 - Seer

不要重复造轮子，最好检查row_attr选项（自Symfony 4.3以来）。 - Dam Fa

@Dam Fa，请在点踩之前检查一下回答的日期 ;) - nni6

2021年，被接受的答案应该是Dam Fa的答案：https://dev59.com/c2kw5IYBdhLWcg3wPIB7#64628031 - learner

Answer 2

我的答案与nni6的非常相似，但它允许你通过整个attr数组。

我的HTML结构适用于Twitter Bootstrap，但你可以使用任何你想要的。此示例还在包装器div上放置一个错误类（如果有错误，则此部分不是必需的，但如果你使用Bootstrap则很有用）：

{% extends 'form_div_layout.html.twig' %}

{% block field_row %}
{% spaceless %}
    {% set field_row_classes = ['control-group'] %}
    {% if errors|length > 0 %}
        {% set field_row_classes = field_row_classes|merge(['error']) %}    
    {% endif %}

    <div class="{{ field_row_classes|join(' ') }}">
        {{ form_label(form, label|default(null)) }}
        <div class="controls">
            {{ form_widget(form, { 'attr' : attr|default({}) }) }}
            {{ form_errors(form) }}
            {% if help is defined %}
                <p class="help-block">{{ help }}</p>
            {% endif %}
        </div>
    </div>
{% endspaceless %}
{% endblock field_row %}

这里的区别在于我使用了attr数组来调用form_widget（如果已指定，默认为{}）。

现在，您可以像平常一样设置表单，但是通过传递自定义类：

{{ form_row(myentity.myproperty, { 'label' : 'mylabel', 'attr' : { 'class' : 'myclass' }}) }}

- OrganicPanda

Answer 3

这篇文章需要更新！

自 Symfony 4.3 版本起，row_attr选项允许添加属性（因此也可以添加类）。让我们查看这些链接：

• 在这里：https://symfony.com/blog/new-in-symfony-4-3-more-form-improvements#row-attributes-in-form-themes

• 或者更具体地说：https://symfony.com/doc/current/reference/forms/types/form.html#row-attr

- Dam Fa

Answer 4

我使用这段代码在Symfony中配置Bootstrap。

{% block field_row %}
{% spaceless %}
    <div class="control-group {% if errors|length > 0 %}error{% endif %}">
        {{ form_label(form, label, { 'attr': { 'class': 'control-label' } }) }}
        <div class="controls">
            {{ form_widget(form, { 'attr' : attr|default({}) }) }}
            {{ form_errors(form) }}
        </div>
    </div>
{% endspaceless %}
{% endblock field_row %}

- Pablo Veintimilla Vargas

Answer 5

最简单的方法是不覆盖块的情况下完成这个任务：

{% set attr = {'class' : form.myElement.vars.attr.class ~ ' addedClasses...', 'style' : form.myElement.vars.attr.style ~ '; addedStyles...'} %}
{{- form_row(form.myElement, {'attr' : attr}) -}}

- Nickolaus