Symfony2 - 自定义窗体外的按钮

Question

我有窗体和页面布局的问题.我通过以下方式渲染页面:

{% block body -%}
{{ form(edit_form, {'style': 'horizontal'}) }}
    <ul class="record_actions">
        <li>
            <a href="{{ path('organization') }}">
                <button type="button" class="btn btn-default">Back to the list</button>
            </a>
        </li>
        <li>
            {{ form(delete_form) }}
        </li>
 {% endblock %}

我在ul record_actions上有一些风格.它看起来像这样:http://postimg.org/image/sby8jnojz/

我的问题是更新按钮.我想<ul>用其他2个按钮将它放入标签中.是否有可能将其置于形式之外？我喜欢,表格看起来如何{{ form(edit_form, {'style': 'horizontal'}) }}.所以我不想自定义每个部分{{form_widget}}.或者是否有可能渲染所有表单,然后只渲染此按钮？

Answer 1

更新的答案

让我们采用一种假设的控制器方法 - 我已经定义了两种形式edit_form和delete_form.不要太担心这些,它们只是概念的证明.这里重要的是我有两个表单要发送给要呈现的模板:

// Foo\BarBundle\Controller\BazController
public function editAction()
{
    // a placeholder 'edit' form
    $editForm = $this->createFormBuilder()
        ->add('name', 'text')
        ->add('email', 'email')
        ->add('send', 'submit')
        ->getForm();

    // a placeholder 'delete' form
    $deleteForm = $this->createFormBuilder(['id' => 1])
        ->add('id', 'hidden')
        ->getForm();

    // assign form views to template
    return [
        'edit_form'   => $editForm->createView(),
        'delete_form' => $deleteForm->createView(),
    ];
}

接下来的模板.我们有两种表现形式:edit_form和delete_form.我们需要考虑几个问题 - 不允许在表单中呈现表单,因此我们无法delete_form在内部呈现,edit_form反之亦然.

但是,正如我在下面解释的那样,我们可以使用HTML5 form属性在<form>上下文之外放置表单元素,并仍然将它们链接到该表单(具有上述IE*限制).所以,让我们这样做,并在适当的时候建议一个解决方法.

最少侵入性的事情是渲染delete_form后,edit_form但将edit_form删除按钮放在里面 edit_form.

我不知道你是否使用CSS framewok来帮助你进行布局 - 我假设Bootstrap 2.*这里你可能需要更新你的标记 - 无论哪种方式,这个想法应该足够清楚:

<div class="row">
    {{ form_start(edit_form, {'attr': {'id': 'edit-form'}}) }}
    <div class="span4">
        <ul class="record_actions">
            <li>{{ form_widget(edit_form.send)}}</li>
            <li><button id="delete-form-submit" form="delete-form">
                Delete
                </button>
            </li>
        </ul>
    </div>
    <div class="span4">
        {{ form_rest(edit_form) }}
    </div>
    {{ form_end(edit_form) }}
</div>

{{ form(delete_form, {'attr': {'id': 'delete-form'}, 'method': 'GET'}) }}

上面的HTML产生类似于以下的布局:

几点解释:

1. 我为表单创建了一个双列布局.该.record_actions按钮呈现左边列-这是必不可少的-但它们是浮动权使用引导的.pull-right在这种情况下.

   2. 更新按钮:我要做的第一件事是在我想要的地方渲染submit按钮ul.record_actions:<li>{{ form_widget(edit_form.send)}}</li>

   3. 删除按钮:我没有在上面定义一个submit按钮,delete_form因为我想在它的上下文之外显式创建它delete_form,而是将它放在我拥有的位置.请注意,我在此元素上定义了一个表单属性delete-form.这将此元素链接到delete_form而不是edit_form:<li><button id="delete-form-submit" form="delete-form">Delete</button></li>

   4. 剩下的字段:根据@Kix的建议,在第二列中我可以edit_form隐式地转储所有剩余的字段!{{ form_rest(edit_form) }}

   5. 删除表单最后,我们渲染delete_form 外部的edit_formwith {{ form(delete_form, {'attr': {'id': 'delete-form'}, 'method': 'GET'}) }}.这里需要注意几点 - 我们明确地为表单添加了一个id {'attr': {'id': 'delete-form'}.这很重要,因为它是删除按钮引用的属性.在这种情况下,我还添加'method': 'GET'了在我的机器上测试.您可能希望将其保留(在这种情况下,默认为POST)

你有它......这应该可以帮助你定义你喜欢的布局.

但是,我们仍然需要解决IE问题.如果您使用的是jQuery,则可以在删除按钮中添加一个单击处理程序,我们已为其分配了ID #delete-form-submit.请注意,以下是建议,未经测试:

$(function() {
  if ($.browser.msie) { // @see: http://api.jquery.com/jquery.browser/
    $('#delete-form-submit').on('click', function(e) {
      e.preventDefault();
      $('#delete-form').submit();
    });
  });
});

现在您需要担心JS禁用的IE用户...或不!;) 希望这可以帮助.

原始答案

我认为你的问题可能是Symfony不可知的...让我解释一下:

您是否submit使用表单构建器创建表单的按钮？我假设你是因为你没有在上面粘贴的twig片段中明确创建一个.

这当然完全没问题.我通常只是定义我的Twig表单模板,我收集的是较旧的方法(因为2.4文档似乎没有提示如下):

<form class="form-horizontal" action="{{ path('foo_edit') }}" method="post" {{ form_enctype(edit_form) }}>
    {{ form_widget(edit_form) }}
    <input type="submit">
</form>

在我看来,这种方式是完全可以接受的 - 你只是没有定义submit按钮.

当然,这并不能解决您的问题,因为您想要"突破"表单.但实际上,您可以使用带有form属性的HTML5执行此操作,该属性允许您将不同的标记链接到特定标记.一般例子:

<form id="foo">
    <label>Username</label>
    <input type="text" name="username">
</form>
<ul>
    <li><input type="submit" form="foo">
</ul>

请注意,该submit按钮位于外部,form#foo但form属性仍然链接到该按钮.

显然它的用处仅限于你想要支持的浏览器范围,因为它是一个HTML5功能.

编辑

我检查了 - 它有相当广泛的浏览器支持,除了.... drumroll IE.显然,包括IE10在内.不幸的是,我认为这是一个破坏者.

kix上面的方法可以很好地工作,然后打印出你想要的单个表单小部件然后使用form_rest.我想补充一点,并说它可能不完全适用于你上面的HTML布局 - 你必须在打电话之前明确打印出任何字段form_rest.