4

现在我有一个包含以下内容的 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'} }) }}

我知道如果我以自定义方式呈现表单中的按钮，这可以实现。

4

2 回答 2

5

更新

一个为你解决这个问题的包，基本上可以满足我的建议，但更好： 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 %}

它的作用是查找按钮上的 data-first-button 和 data-last-button 属性，并为各个按钮添加包含 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')));
于 2013-08-21T19:36:31.297 回答
-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();
于 2015-03-11T23:53:51.523 回答