Silex - Symfony Froms - 如何将每个单选按钮及其标签包装到选择列表中每个单选的单独 div？答案

【问题标题】：Silex - Symfony Froms - How to wrap each radio button and its label in to separate div for each radio in choice list?Silex - Symfony Froms - 如何将每个单选按钮及其标签包装到选择列表中每个单选的单独 div？
【发布时间】：2016-03-12 12:36:39
【问题描述】：

我正在使用带有 Symfony 表单的 Silex 微框架。在树枝模板中，我使用以下方法生成该字段：

...
{{ form_widget(form.transport_selection) }}
...

如何覆盖这个 symfony twig 表单模板，以便为 Silex 中的每个集合（输入字段和标签）生成换行。

这是我的树枝注册：

use Silex\Provider\FormServiceProvider;
use Symfony\Component\Translation\Loader\YamlFileLoader;
use Symfony\Component\Validator\Constraints as Assert;

$app->register(new Silex\Provider\TwigServiceProvider(), array(
    'twig.path' => [
        __DIR__.'/App/View',
    ]
));

如何为每个单选选项用 div 包装单选按钮和标签？

输出：

<div id="form_transport_selection">
  <input type="radio" id="form_transport_selection_0" name="form[transport_selection]" required="required" value="country" checked="checked">
  <label for="form_transport_selection_0" class="required">country</label>
  <input type="radio" id="form_transport_selection_1" name="form[transport_selection]" required="required" value="abroad">
  <label for="form_transport_selection_1" class="required">abroad</label>
</div>

预期输出：

<div id="form_transport_selection">
  <div class="radio1">
    <input type="radio" id="form_transport_selection_0" name="form[transport_selection]" required="required" value="country" checked="checked">
    <label for="form_transport_selection_0" class="required">country</label>
  </div>
  <div class="radio2">
    <input type="radio" id="form_transport_selection_1" name="form[transport_selection]" required="required" value="abroad">
    <label for="form_transport_selection_1" class="required">abroad</label>
  </div>
</div>

谢谢

【问题讨论】：

标签： twig symfony-forms silex

【解决方案1】：

您可以为此表单创建新模板并重新定义单选按钮视图

我的.form.twig

{% extends "form_div_layout.html.twig" %}

{%- block choice_widget_expanded -%}
    <div {{ block('widget_container_attributes') }}>
    {% set i=1 %}
    {%- for child in form %}
        <div class="radio-{{i}}">
            {{- form_widget(child) -}}
            {{- form_label(child, null, {translation_domain: choice_translation_domain}) -}}
        </div>
        {% set i=i+1 %}
    {% endfor -%}
    </div>
{%- endblock choice_widget_expanded -%}

并在显示表单的控制器模板中使用它

{% form_theme form 'my.form.twig' %}
....
{{ form_widget(form.transport_selection) }}

【讨论】：

按预期工作。谢谢你

【解决方案2】：

扩展 MaxP 的答案。确保只为单选按钮修改它，您不希望在复选框中使用它！我为复选框添加了一个不同的类。请注意执行此操作的 if/else。

{% extends "form_div_layout.html.twig" %}

{% block choice_widget_expanded %}
<div {{ block('widget_container_attributes') }}>
    {% set i=1 %}
    {% for child in form %}
        {% if form.vars.multiple == false %}
        <div class="radio-{{i}}">
        {% elseif form.vars.multiple == true %}
        <div class="checkbox-{{i}}">
        {% endif %}
            {{ form_widget(child) }}
            {{ form_label(child, null, {translation_domain: choice_translation_domain}) }}
        </div>
        {% set i=i+1 %}
        {% endfor %}
    </div>
{% endblock choice_widget_expanded %}

并在显示表单的控制器模板中使用它

{% form_theme form 'my.form.twig' %}
....
{{ form_widget(form.transport_selection) }}

使用 Symfony 时，我建议覆盖 app/Resources/views/Form/fields.html.twig 中的所有 Twig 字段

然后在 config.yml 上，您只需将其添加到 twig 的配置中即可使用

  twig:
      form_themes:
        - 'Form/fields.html.twig'

【讨论】：