Как добавить класс css в" строку формы " в шаблоне twig

Я хотел бы знать, как я могу добавить класс css на "{{ form_row() }}" в twig. На данный момент, у меня есть этот код :

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

... Но класс CSS "loginForm" не используется в HTML-коде.

спасибо :) !

8
symfony twig

4 ответов

Если вы хотите общий класс для form_row (это означает один класс для form_label, form_widget и form_errors), вы должны настроить блок field_row.

в этой статье объясняется, как настроить поля в форме: как настроить рендеринг формы. Для этого есть несколько методов.

например, я использую метод 2 (как настроить рендеринг формы: Метод 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 %}
13

мой ответ очень похож на nni6, но он позволяет вам пройти через весь массив attr.

моя структура HTML предназначена для загрузки Twitter, но вы можете иметь все, что хотите. В этом примере также помещается класс ошибки на оболочке 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 array (если он был указан, по умолчанию {})

теперь вы можете настроить свою форму как обычно, но пройти через пользовательский класс:

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

Я использую этот код для настройки bootstrap в symfony

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

самый простой способ выполнить это без перезаписи блоков:

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