Question

我正在尝试摆脱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脚本来修复我的布局，就像我想要它的方式一样，但就像说的那样脏了。所以我想知道是否有人可以帮助我改变我的twig文件，只显示子元素的form-group和form-widget css类，而不是父母。

脏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 %}

现在，twig位是标准的SF2引导程序表单布局，我很确定我没有改变它。

所以任何帮助摆脱js脚本并实际上在树枝上做的都会很棒，我尝试了一些东西，但是每一个都比我用js做的更糟糕，所以我就是这样有点卡住了。

编辑：

js脚本的作用是删除css类，因此布局有效。它看起来很平坦，因为它只是空的div，但我所追求的并不是首先显示div。我试图改变树枝脚本，而不是css，因为这就是我们想要的方式。

Answer 1

您有三种选择。

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.或者您可以创建自己的form theme。

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 %}

这一切都取决于你未来的表格会有多少个字段以及你有多少相似的表格。

然而，使用JS来做这样的事情是禁忌。

Answer 2

最简单的方法是创建自定义表单主题。

如果你看at the current Symfony2's bootstrap one，你可以看到：

{% 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 %}

＆＃34;复制品＆＃34;东西实际上告诉你当前元素是否包含子元素（表单，集合，...基本上所有父元素），如果你不想为父母提供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是您当前的表单对象。

Answer 3

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 )

并且可以在树枝中添加条件。

如果你有问题，比如你的表格有子表格和twig 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 %}

代码并不像这样，但主要概念是。

希望你理解我的观点。

使用Symfony2（.7）

3 个答案: