我正试图摆脱symfony2形式的重复布局目前我的布局看起来像这样:
<form name="step2" method="post" action="" class="productForm">
<h2>Step2:</h2>
<div id="step2">
<div class="form-group">
<div class="form-widget">
<div id="step2_client1">
<div class="form-group"><label class="control-label required" for="step2_client1_clientTitle">Client 1 title:</label>
<div class="form-widget"><select id="step2_client1_clientTitle" name="step2[client1][clientTitle]" class="form-control">
<option value="Mr">Mr</option>
<option value="Mrs">Mrs</option>
<option value="Miss">Miss</option>
<option value="Ms">Ms</option>
<option value="Dr">Dr</option>
<option value="Sir">Sir</option>
</select></div>
</div>
<div class="form-group"><label class="control-label required" for="step2_client1_firstName">Client 1 first name:</label>
<div class="form-widget"><input type="text" id="step2_client1_firstName" name="step2[client1][firstName]" required="required" class="form-control">
</div>
</div>
<div class="form-group"><label class="control-label required" for="step2_client1_surname">Client 1 last name:</label>
<div class="form-widget"><input type="text" id="step2_client1_surname" name="step2[client1][surname]" required="required" class="form-control"></div>
</div>
</div>
</div>
</div>
...
<div class="form-group form-group-submit">
<div class=""><a id="step2_save" class="has-spinner btn btn-default btn-submit"><span class="spinner"><i class="fa fa-spinner fa-spin"></i></span>Complete the quote
</a></div>
</div>
<input type="hidden" id="step2__token" name="step2[_token]" class="form-control" value="xxx"></div>
</form>
我有一个脏的js脚本来修复我的布局,按照我想要的方式显示,但这是,如我所说,脏。所以我想知道是否有人可以帮助我改变我的分支文件,只显示窗体组和窗体小部件css类的子元素,而不是为父母。
dirty js脚本:
$('.form-group').each(function(e){
if($(this).parents('.form-group').length) {
var $realGroup = $(this).parents('.form-group');
$realGroup.toggleClass('form-group');
$realGroup.children('.form-widget').toggleClass('form-widget');
}
});
和小树枝:
{% block form_row -%}
{% spaceless %}
<div class="form-group{% if (not compound or force_error|default(false)) and not valid %} has-error{% endif %}">
{{ form_label(form) }}
<div class="form-widget">
{{ form_widget(form) }}
{{ form_errors(form) }}
</div>
</div>
{% endspaceless %}
{%- endblock form_row %}
现在小树枝是标准的SF2引导表单布局,我很确定我没有改变它。
所以任何帮助摆脱js脚本,实际上做它在树枝将是伟大的,我已经尝试了一些事情,但每一个结果比我做的js更糟,所以我有点卡住。
编辑:js脚本所做的,只是删除css类,所以布局工作。它看起来是平的,因为它只是空的div,但我想要的是首先不显示div。我试图改变小枝脚本,而不是css,因为这正是我们想要的方式。
您有三个选择。
1。手动创建每个字段:
{{ form_start(form, {'action': path(''), 'attr': {'class':'productForm'}}) }}
{{ form_errors(form) }}
<div class="form-group">
{{ form_label(form.clientTitle, 'Client 1 title:', {'label_attr': {'class': 'control-label required'}}) }}
<div class="form-widget">
{{ form_widget(form.clientTitle, { 'attr': {'class': 'form-control' }}) }}
</div>
{{ form_errors(form.clientTitle) }}
</div>
<div class="form-group">
{{ form_label(form.firstName, 'Client 1 first name:', {'label_attr': {'class': 'control-label required'}}) }}
<div class="form-widget">
{{ form_widget(form.firstName, { 'attr': {'class': 'form-control' }}) }}
</div>
{{ form_errors(form.firstName) }}
</div>
<div class="form-group">
{{ form_label(form.firstName, 'Client 1 last name:', {'label_attr': {'class': 'control-label required'}}) }}
<div class="form-widget">
{{ form_widget(form.firstName, { 'attr': {'class': 'form-control' }}) }}
</div>
{{ form_errors(form.firstName) }}
</div>
<div class="form-group form-group-submit">
<div class="">
<a id="step2_save" class="has-spinner btn btn-default btn-submit">
<span class="spinner">
<i class="fa fa-spinner fa-spin"></i>
</span>
Complete the quote
</a>
</div>
</div>
{{ form_end(change_password) }}
2。或者您可以创建自己的表单主题。
3。或者为每个表单使用一个循环:
{% for child in form.children %}
<div class="form-group">
{{ form_label(child, null, {'label_attr': {'class': 'control-label required'}}) }}
<div class="form-widget">
{{ form_widget(child, { 'attr': {'class': 'form-control' }}) }}
</div>
{{ form_errors(child) }}
</div>
{% endfor %}
这完全取决于你未来的表单有多少字段,以及你有多少类似的表单。
最简单的方法是创建自定义表单主题。
如果你看一下当前Symfony2的bootstrap,你可以看到:
{% block form_row -%}
<div class="form-group{% if (not compound or force_error|default(false)) and not valid %} has-error{% endif %}">
{{- form_label(form) -}}
{{- form_widget(form) -}}
{{- form_errors(form) -}}
</div>
{%- endblock form_row %}
"复合"的东西实际上是告诉你当前元素是否包含子元素(表单,集合,…)(基本上是所有的父元素),如果你不想为父元素拥有form-group
类,你只需要在自定义主题中重载这个块。
{# AppBundle::custom_theme.html.twig #}
{% use "bootstrap_3_layout.html.twig" %}
{% block form_row -%}
<div class="{% if not compound %}form-group{% endif %}{% if (not compound or force_error|default(false)) and not valid %} has-error{% endif %}">
{{- form_label(form) -}}
{{- form_widget(form) -}}
{{- form_errors(form) -}}
</div>
{%- endblock form_row %}
如果你根本不需要div,那就删除它!现在轮到你了。
要在整个项目中应用更改,可以在config.yml
中添加:
twig:
# ...
form_themes:
- 'AppBundle::custom_theme.html.twig'
或仅在特定视图上使用:
{% form_theme yourForm 'AppBundle::custom_theme.html.twig' %}
注意:yourForm
是你当前的窗体对象
George Irimiciuc已经帮助了你,我的观点是你可以使用George回答中提供的第二个选项,你需要专注于表单主题的这一部分。
Symfony2 twig创建表单基于选定的主题,如果你会尝试添加你的表单主题,那么它会很好,其他选项意味着你只是把问题推到其他地方,这只是一个技巧。不需要更新完整的表单,只需添加您的form_row它将工作,可以尝试这个
http://symfony.com/doc/current/cookbook/form/form_customization.html customizing-the-form-row
我使用这是我的项目,最好的一点是,你可以从你的表单生成器发送属性字段,然后检查form_row下的字段,它呈现你的表单行,可以创建表单,像你想要的,检查条件后-
attr => array( 'parent_class' => false)
可以在form_row下面检查,比如
if( form.vars.attr.parent_class is defined )
,可以在枝条中添加条件。
如果你有问题,比如你的表单有子表单和分支form_row以奇怪的方式显示-
我建立了这个项目,只有这个到现在为止,其中有学生实体与各种实体连接,所以在像个人资料这样的表单条目的时候。我使用了实体学生和地址我所做的是,我只是检查了这个
{% if ( not form.children ) or ( form.vars.expanded is defined and form.vars.expanded ) %}
<div class="{{ form.vars.attr['parent-div-class'] is defined ? form.vars.attr['parent-div-class'] : 'col-sm-12'}}">
<div class="form-group">
{{ form_label(form) }}
{{ form_widget(form) }}
{% if form_errors(form) %}
{{ form_errors(form) }}
{% endif %}
</div>
</div>
{% else %}
<div class="clear-both"></div>
{{ form_label(form) }}
{{ form_widget(form) }}
{% endif %}
代码不是这样的,但主要的概念是。
希望你能理解我的意思。