如何在樹枝模板中的「form_row」上添加一個css類

Question

我想知道如何在樹枝中的「{{form_row（）}}」上添加一個css類。就目前而言，我有這樣的代碼：

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

...但CSS類「登錄表單」沒有在HTML代碼中使用。

謝謝:)！

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錯誤類 - 不需要此部分，但如果你用的是有用的引導：

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

配置引導

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