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 micro faramework 和 Symfony 表单。在树枝模板中,我使用以下方式生成此字段:
...
{{ form_widget(form.transport_selection) }}
...
如何覆盖此 symfony twig 表单模板以在 Silex 中为每个集合(输入字段和标签)生成换行。
这是我的twig注册:
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>
谢谢
您可以为此表单制作新模板并重新定义单选按钮视图
my.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) }}
扩展 MaxP 的回答。确保只为单选按钮修改它,你不想在复选框中使用它!我为复选框添加了不同的 class。请注意 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 中的所有 Twig 字段。html.twig
然后在 config.yml 上,您只需将其添加到 twig 的配置中即可使用
twig:
form_themes:
- 'Form/fields.html.twig'
我正在使用 Silex micro faramework 和 Symfony 表单。在树枝模板中,我使用以下方式生成此字段:
...
{{ form_widget(form.transport_selection) }}
...
如何覆盖此 symfony twig 表单模板以在 Silex 中为每个集合(输入字段和标签)生成换行。
这是我的twig注册:
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>
谢谢
您可以为此表单制作新模板并重新定义单选按钮视图
my.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) }}
扩展 MaxP 的回答。确保只为单选按钮修改它,你不想在复选框中使用它!我为复选框添加了不同的 class。请注意 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 中的所有 Twig 字段。html.twig
然后在 config.yml 上,您只需将其添加到 twig 的配置中即可使用
twig:
form_themes:
- 'Form/fields.html.twig'