Question

现在我的FormType包含以下内容：

$builder->add('name','text')
    ->add('save','submit',array('label'=>'Save', 'attr'=>array('class'=>'btn btn-primary')))
    ->add('reset','reset',array('label'=>'Reset Form', 'attr'=>array('class'=>'btn btn-warning')));

现在我有一些形式主题，将上面的内容呈现为：

<form method="post" action="">
    <input type="hidden" name="_csrf_token" value="*********" />
    <div class="form-group">
        <label class="col-4">Name</label>
        <input type="text" name="form[name]" value="" placeholder="Name" />
    </div>
    <div class="form-group">
        <input type="submit" name="form[save]" value="Save" class="btn btn-primary" />
    </div>
    <div class="form-group">
        <input type="reset" name="form[reset]" value="Reset" class="btn btn-warning" />
    </div>
</form>

然而，我想要的输出是：

<form method="post" action="">
    <input type="hidden" name="_csrf_token" value="*********" />
    <div class="form-group">
        <label class="col-4">Name</label>
        <input type="text" name="form[name]" value="" placeholder="Name" />
    </div>
    <div class="form-group">
        <input type="submit" name="form[save]" value="Save" class="btn btn-primary" />
        <input type="reset" name="form[reset]" value="Reset" class="btn btn-warning" />
    </div>
</form>

请注意，这些按钮位于相同的表单组包装div中。我想知道是否有办法只使用FormType或编辑表单主题。我不想改变使用的视图：

{{ form(form,{'method':'POST','attr':{'class':'form-horizontal'} }) }}

我知道如果我以自定义方式从表单中渲染按钮，就可以实现这一点。

Answer 1

<强>更新

一个为你解决这个问题的捆绑包基本上做了我的建议，但更好： http://bootstrap.braincrafted.com/components.html#forms

这远非最优雅的方式，但我没有找到任何其他方法来做到这一点。

我有一个有效的解决方案，包括修改FormType并覆盖form_div_layout.html.twig中的一些块

{# form_div_layout.html.twig #}

{% block button_row %}
{% spaceless %}
    {% if 'data-first-button' in attr %}
    <div class="form-group">
        <div class="col-12">
    {% endif %}
    {{ form_widget(form) }}
    {% if 'data-last-button' in attr %}
        </div>
    </div>
    {% endif %}
{% endspaceless %}
{% endblock button_row %}

{% block button_attributes %}
{% spaceless %}
    id="{{ id }}" name="{{ full_name }}"{% if disabled %} disabled="disabled"{% endif %}
    {% for attrname, attrvalue in attr %}{% if attrvalue != 'data-first-button' and attrvalue != 'data-last-button'%}{{ attrname }}="{{ attrvalue }}"{%endif%}{% endfor %}
{% endspaceless %}
{% endblock button_attributes %}

这样做是为了查找按钮上的数据优先按钮和数据最后按钮属性，并为相应的按钮添加包含的div。然后在按钮属性块中，我们查找这些属性并忽略它们。然后在表单类型中我们只需将attr添加到右侧按钮，如下所示：

$builder->add('name','text')
   ->add('save','submit',array('label'=>'Save', 'attr'=>array('class'=>'btn btn-primary','data-first-button')))
   ->add('reset','reset',array('label'=>'Reset Form', 'attr'=>array('class'=>'btn btn-warning','data-last-button')));

Answer 2

我有一个更好的答案（比2年前最后一个接受的答案更现代的解决方案。

在您的控制器中注释添加这些元素的位置

 /* -   
   ->add('cancel', 'button', array())
   ->add('save', 'submit', array())
*/

现在像这样设置表单

{{ form_start(form,  {'attr': {'id': 'your-form-id'},}) }}
{{ form_errors(form) }}
{{ form_row(form.name) }}

<div class="form-group">
    <button id="form_reset"name="form[reset]" type="button">Reset</button>
    <button id="form_save" name="form[save]" type="submit">Save Form</button>
</div>

{{ form_end(form) }}

您始终可以选择jQuery解决方案，但以上是自定义表单的正确方法

或jQuery解决方案可能看起来像这样;

var formInputSave = $('input:form[save]'),
    formInputReset = $('input:form[reset]'),
    formGroupReset = formInputReset.parent();   

    //save the form group with the form[save] in it.  
    //Append the reset input to it, then remove the initial form group
    $(formInputSave).append(formInputReset);
    $(formGroupReset).empty();

Symfony 2.3如何在一个表单组中将按钮组合在一起？

2 个答案: