Question

我想知道如何在twig中的“{{form_row（）}}”中添加css类。目前，我有这段代码：

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

...但是HTML代码中没有使用CSS类“loginForm”。

谢谢:)！

Answer 1

如果你想要form_row的公共类（它意味着form_label，form_widget和form_errors的一个类），你应该自定义一个field_row块。

本文介绍如何自定义表单字段：How to customize Form Rendering。有一些方法可以做到这一点。

例如我正在使用方法2（How to customize Form Rendering: Method 2）：

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

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

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

现在您可以正常设置表单，但可以通过自定义类：

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

Answer 3

我使用此代码在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 %}

Answer 4

在不覆盖块的情况下实现此目的的最简单方法是：

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

Answer 5

此帖子需要更新！

自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

如何在twig模板中的“form_row”上添加css类

5 个答案: