Wie man eine CSS-Klasse auf einem "form_row" in Zweig Vorlage

Question

hinzufügen Ich würde gerne wissen, wie ich eine CSS-Klasse auf einem "{{form_row()}}" in Zweig hinzufügen kann. Im Moment habe ich diesen Code:

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

... Aber die CSS-Klasse „Loginform“ ist nicht im HTML-Code verwendet.

Danke :)!

Answer 1

Wenn Sie die allgemeine Klasse für form_row (dh eine Klasse für form_label, form_widget und form_errors) möchten, sollten Sie einen field_row-Block anpassen. In diesem Artikel wird erläutert, wie Formularfelder angepasst werden: How to customize Form Rendering. Es gibt einige Methoden, dies zu tun.

Zum Beispiel bin ich mit Methode 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

Meine Antwort ist sehr ähnlich wie nni6 ist, aber es ermöglicht es Ihnen, durch die gesamte attr Array übergeben.

Meine HTML-Struktur ist für Twitter Bootstrap, aber Sie können haben, was Sie wollen. Dieses Beispiel stellt auch eine Fehlerklasse auf dem Wrapper div ob es irgendwelche Fehler sind - dieser Teil ist nicht erforderlich, aber ist nützlich, wenn Sie Bootstrap verwenden:

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

Der Unterschied hier ist, dass ich form_widget mit den attr bin Aufruf Array (wenn es angegeben wurde, ist voreingestellt auf {})

Jetzt können Sie Ihre Form als normal eingerichtet, aber eine benutzerdefinierte Klasse durchlaufen:

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

Answer 3

ich diesen Code verwenden Bootstrap in symfony konfigurieren

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

Der einfachste Weg, dies zu tun, ohne Blöcke überschrieben wird, ist dies:

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