如何在symfony 2中的同一模板中呈现具有不同主题的表单

Question

我想在Symfony中自定义表单呈现.我查看了文档,发现可以使用{{ form_theme }}标记设置渲染主题.如果当时只有一个表单存在,但如果在同一模板中有多个表单则不起作用,这种方法非常有效.

我的index.html.twig中的一个简单示例

{% extends 'base.html.twig' %}
{% block body %}

<h1>Hello Form 1</h1>
{% form_theme form1 'bootstrap_3_layout.html.twig'  %}

{{  form_start( form1 ) }}
{{  form_end( form1 ) }}

<h1>Hello Form 2</h1>
{% form_theme form2 'bootstrap_3_horizontal_layout.html.twig'  %}

{{  form_start( form2 ) }}
{{  form_end( form2 ) }}

{% endblock %}

正如你可以看到有两个表单变量,我想form1与渲染'bootstrap_3_layout.html.twig',并form2用'bootstrap_3_horizontal_layout.html.twig'.我不知道Twig内部,但我认为主题覆盖了他们的块定义.

结果看起来像这样

所以我的问题是如何渲染具有给定主题的表单而不会相互干扰.有没有办法在单独的干净枝条过程中渲染表单？

我尝试使用自定义函数的Twig扩展,但似乎该函数使用相同的Twig_Environment.我还尝试使用{%render}%的子请求,但这也不起作用.

Answer 1

树枝溶液

如果您只想将该horizontal类用于表单，您可以将其添加到form_start()：

{% extends 'base.html.twig' %}
{% block body %}

<h1>Hello Form 1</h1>
{% form_theme form1 'bootstrap_3_layout.html.twig'  %}

{{ form_start( form1 ) }}
{{ form_end( form1 ) }}

<h1>Hello Form 2</h1>
{% form_theme form2 'bootstrap_3_horizontal_layout.html.twig'  %}

{{ form_start(form2, {'class': 'horizontal', 'attr': {'class': 'horizontal'}}) }}
{{ form_end( form2 ) }}

{% endblock %}

感谢 Ahmed Siouani 的回答。

HTML + CSS 解决方案

我建议您将每个 Twig 标签包含{{ form() }}在一个<div>类中，它将允许您添加特定的 CSS 规则。请参阅下面的示例：

{% extends 'base.html.twig' %}
{% block body %}

<h1>Hello Form 1</h1>
{% form_theme form1 'bootstrap_3_layout.html.twig'  %}

{{ form_start( form1 ) }}
{{ form_end( form1 ) }}

<h1>Hello Form 2</h1>
{% form_theme form2 'bootstrap_3_horizontal_layout.html.twig'  %}

{{ form_start(form2, {'class': 'horizontal', 'attr': {'class': 'horizontal'}}) }}
{{ form_end( form2 ) }}

{% endblock %}

/* display the <label> in div.form_1 as red */
div.form_1 label {
  color: Red;
}

/* Email field in div.form_2 will only have a width of 50% */
div.form_2 input[type=email] {
  width: 50%;
}
/* Password field in div.form_2 will have a left margin and will be narrower */
div.form_2 input[type=password] {
  margin-left: 5em;
  width: 30%;
}