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

Question

我想在Symfony中自定义表单呈现。我检查了docs，发现可以使用{{ 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

Twig解决方案

如果您只想将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致敬answer。

HTML + CSS解决方案

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

＆＃13;

＆＃13;

/* 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%;
}

＆＃13;

<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" />

<div class="well">
  <h2>Default form</h2>
  <form>
    <div class="form-group">
      <label for="exampleInputEmail1">Email address</label>
      <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
    </div>
    <div class="form-group">
      <label for="exampleInputPassword1">Password</label>
      <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
    </div>
  </form>
</div>

<div class="form_1 well">
  <h2>Form 1</h2>
  <form>
    <div class="form-group">
      <label for="exampleInputEmail1">Email address</label>
      <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
    </div>
    <div class="form-group">
      <label for="exampleInputPassword1">Password</label>
      <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
    </div>
  </form>
</div>

<div class="form_2 well">
  <h2>Form 2</h2>
  <form>
    <div class="form-group">
      <label for="exampleInputEmail1">Email address</label>
      <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
    </div>
    <div class="form-group">
      <label for="exampleInputPassword1">Password</label>
      <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
    </div>
  </form>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

您的代码在我的测试中运行良好。

您可能会为form1和form2发送相同的表单类型，这会导致您的问题。如果您发送2种不同的表单类型，它应该工作。