5

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

我创建了一个名为“类别”的 Doctrine 实体，并且所有视图都已正确创建。

但是 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>

希望有人能帮忙。提前致谢。

4

3 回答 3

5

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

{% block form_label %}
{% if 'checkbox' not in block_prefixes %}
  {{ parent() }}
{% endif %}
{% endblock form_label %}
于 2013-08-09T06:02:22.550 回答
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 %}
于 2015-11-06T13:41:40.377 回答
-1

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

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) }} 对于复选框，它将小部件和标签顺序反转为我想要的（将交互式复选框放在首位，在其文本标签之前）。

于 2015-06-17T12:52:38.267 回答