Cómo agregar una clase css en un "form_row" en la plantilla twig

Question

Me gustaría saber cómo puedo agregar una clase css en un "{{form_row()}}" en rama. Por el momento, tengo este código:

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

... Pero la clase CSS "LoginForm" no se utiliza en el código HTML.

Gracias :)!

Answer 1

Si desea la clase común para form_row (significa una clase para form_label, form_widget y form_errors), debe personalizar un bloque field_row.

Este artículo explica cómo personalizar los campos de formulario: How to customize Form Rendering. Hay algunos métodos para hacer esto.

Por ejemplo, yo estoy usando el método 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

Mi respuesta es muy similar a la de nni6 pero le permite pasar a través de toda la matriz attr.

Mi estructura HTML es para Twitter Bootstrap pero puede tener lo que quiera. Este ejemplo también pone una clase de error en el div contenedor si hay algún error - no se requiere esta parte, pero es útil si se utiliza 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 %} 

La diferencia aquí es que estoy llamando form_widget con el attr array (si se especificó, por defecto {})

Ahora se pueden configurar su forma normal, pero como pasar a través de una clase personalizada:

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

Answer 3

que utiliza este código para configurar arranque en 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 %} 

Answer 4

La forma más sencilla de lograr esto sin sobrescribir los bloques es la siguiente:

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