使用Symfony2减少Twig中的表单组布局（.7） [英] Reduce form groups layout in Twig with Symfony2(.7)

问题描述

 <$ c $目前我的布局看起来像这样：
 c>< form name =step2method =postaction =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 requiredfor =step2_client1_clientTitle>客户端1标题：< / label> 
 
< div class =form-widget>< select id =step2_client1_clientTitlename =step2 [client1] [clientTitle]class =form-control> 
< option value =Mr> Mr< / option> 
< option value =Mrs> Mrs< / option> 
< option value =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 requiredfor =step2_client1_firstName>客户端1名：< / label> 
 
< div class =form-widget>< input type =textid =step2_client1_firstNamename =step2 [client1] [firstName]required =requiredclass = 形式控制 > 
< / div> 
< / div> 
< div class =form-group>< label class =control-label requiredfor =step2_client1_surname>客户端1姓氏：< / label> 
 
< div class =form-widget>< input type =textid =step2_client1_surnamename =step2 [client1] [surname]required =requiredclass = 形式控制 >< / DIV> 
< / div> 
< / div> 
< / div> 
< / div> 
 
 ... 
 
< div class =form-group form-group-submit> 
< div class =>< a id =step2_saveclass =has-spinner btn btn-default btn-submit>< span class =spinner>< i class =fa fa-spinner fa-spin>< / i>< / div>完成报价
< / a>< / div> 
< / div> 
< input type =hiddenid =step2__tokenname =step2 [_token]class =form-controlvalue =xxx>< / div> 
< / form> 
  

我有一个肮脏的js脚本来以我想要的方式修复布局，但是这个正如所说的那样，肮脏。所以我想知道是否有人可以帮我改变我的树枝文件，只显示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'）; 
} 
}）; 
  

以及树枝位：

<$ p $ （非复合或强制错误|默认（false））{％block_form_row - ％}
{％spaceless％}

{{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.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.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.firstName，{'attr'：{'class'：'form-control'}}）}} 
< / div> 
 {{form_errors（form.firstName）}} 
< / div> 
 
 
< div class =form-group form-group-submit> 
< div class => 
 < span class =spinner> 
< i class =fa fa-spinner fa-spin>< / i> 
< / span> 
完成报价
< / a> 
< / div> 
< / div> 
 $ b $ {{form_end（change_password）}} 
  

2.或者您可以创建自己的表单主题。

3.或者为每个表单使用一个循环：

  {％ for 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用于这样的事情是一个不行。

I am trying to get rid of repeating layouts in twig for symfony2 forms Currently my layout looks something like :

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

And I have a dirty js script to fix my layout in the way I want it to showup but this is, as said, dirty. So I was wondering if someone can help me alter my twig file to only show form-group and form-widget css classes for children elements and not for the parents.

The dirty js script:

$('.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');
    }
});

And the twig bit:

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

Now the twig bit is the standard SF2 bootstrap form layout, I'm pretty sure i didn't alter that.

So any help getting rid of the js script and actually doing it in twig would be great, I have tried a few things but every single one of them turned out worse then what I did with js, So I'm a bit stuck.

EDIT:

What the js script does, is just removing the css classes, so the layout works. It would look flat because it would just be empty div's, but what I am after is not showing the divs in the first place. I'm trying to alter the twig script, not the css, as that is just the way we want it.

解决方案

You have three options.

1.Either create each field manually:

{{ 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.Or you could create your own form theme.

3.Or use a loop for each form:

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

It all depends on how many fields your future forms will have and how many similar forms you have.

However, using JS for such a thing is a no-no.

这篇关于使用Symfony2减少Twig中的表单组布局（.7）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！