Question

我目前正在尝试覆盖Symfony 2中的复选框块的默认呈现，但我无法达到预期的效果。

我创建了一个名为＆＃34; Categories＆＃34;的Doctrine Entity，并且所有视图都已正确创建。

但Twig形式的默认复选框标签位置不正确。

PS：我从这里删除了元素中的属性，使其更加干净。

原样：

<label>Field</label>
<input type="checkbox" />

应该是：

<label><input type="checkbox" />Field</label>

我已经创建了一个用于覆盖块本身的模板：

{% block checkbox_widget %}
{% spaceless %}
<label for="{{ id }}">
<input type="checkbox" {{ block('widget_attributes') }}{% if value is defined %} value="{{ value }}"{% endif %}{% if checked %} checked="checked"{% endif %} />
{{ label|trans({}, translation_domain) }}</label>
{% endspaceless %}
{% endblock checkbox_widget %}

在我的edit.html.twig文件中调用它：

{% extends '::base.html.twig' %}
{% form_theme edit_form 'AppGallerySiteBundle:Form:fields.html.twig' %}

在表单中我放置了行：

{{ form_errors(edit_form) }}
{{ form_row(edit_form) }}
{{ form_widget(edit_form) }}
{{ form_rest(edit_form) }}

这是有效的，复选框被覆盖，但是默认树枝形式模板中的普通标签继续显示，而我的覆盖复选框没有显示其中的标签，导致：

<label>Field</label>
<label><input type="checkbox" /></label>

它应该在哪里：

<label><input type="checkbox" />Field</label>

希望有人可以提供帮助。提前谢谢。

Answer 1

您应该禁用复选框的渲染标签。所以你需要像这样覆盖块form_label：

{% block form_label %}
{% if 'checkbox' not in block_prefixes %}
  {{ parent() }}
{% endif %}
{% endblock form_label %}

Answer 2

为了纠正输入和标签的顺序，您可以覆盖form_row块：

{% block form_row %}
  {% spaceless %}
    {% if 'checkbox' in block_prefixes %}
      {{ form_widget(form) }}
      {{ form_label(form) }}
    {% else %}
      {{ form_label(form) }}
      {{ form_widget(form) }}
    {% endif %}
    {{ form_errors(form) }}
  {% endspaceless %}
{% endblock form_row %}

Answer 3

同样的问题困扰着我们的项目。

PHP Array类型的单个Entity字段（因此ORM将其作为JSON字符串存储在数据库记录单元格中，透明地自动解码和编码）应该分解用户的布尔首选项列表，每个首选项都呈现为一个复选框。

所以在EntityType.php中，在

里面

 public function buildForm(FormBuilderInterface $builder, array $options) 

$builder
 ->add('prefs','collection',

然后，在主树枝模板中，而不是{{ form(form) }}它按行迭代：

{% for j,child in form %}
   <div id="form-child-{{ j }}" title="form-child-{{ j }}; loop={{loop.index}}">
        {{ form_row(child) }} 
   </div>
{% endfor %}

虽然这可能没有必要。

在该文件的较高位置，我使用主题覆盖表单的呈现：

 {% form_theme form 'SystemExtMainBundle:Blocks:checkbox.html.twig' %}

其中包含：

{% block form_row %}
        {% if form.vars.block_prefixes.1 == 'checkbox'   %}
<div class="col-xs-12 checkbox-margins checkbox-label-padding">
    <div class="errors-container">
    {{ form_errors(form)}}
    </div>  
     {{ form_widget(form,{'attr': {'class': '  form-checkbox-widget'}}) }}{{ form_label(form) }}


</div>


        {% elseif form.vars.block_prefixes.1 == 'choice' %}
<div class="col-xs-12 top-form-title">
                        {{ form_label(form) }}
</div>
<div class="col-xs-12 select-margins">
    <div class="errors-container">
    {{ form_errors(form)}}
    </div>  
                    {{ form_widget(form,{'attr': {'class': 'select-style form-control'}}) }}

</div>
        {% elseif form.vars.block_prefixes.1 == 'submit'%}
         {{ form_widget(form,{'attr': {'class': 'top-form-button form-control pull-rigth'}}) }}
        {% elseif form.vars.block_prefixes.1 == 'text'%}

<div class="col-xs-12 top-form-title">
                        {{ form_label(form) }}
</div>
<div class="col-xs-12 ">
    <div class="errors-container">
    {{ form_errors(form)}}
    </div>

{％set attr = attr | merge（{'class':( attr.class | default（''）~'form-control top-form-input'）| trim}）％} {{form_widget（form，{'attr'：attr}）}}

</div>
{% else %}

<div class="col-xs-12 top-form-title "> 
                        {{ form_label(form) }}
</div>
<div class="col-xs-12 ">
    <div class="errors-container">
    {{ form_errors(form)}}
    </div>  
                        {{ form_widget(form) }}
</div>
        {% endif %}


{% endblock form_row %}

关键部分是上面的第7行：{{ form_widget(form,{'attr': {'class': ' form-checkbox-widget'}}) }}{{ form_label(form) }}用于复选框，它将窗口小部件和标签顺序反转为我想要的东西（首先将交互式复选框放在文本标签之前）。

如何覆盖Symfony的Twig Form模板中的复选框

3 个答案: