如何在Symfony2 Twig模板的“删除”按钮中添加CSS类？

Question

我是 Symfony 的新手。我的 Symfony 版本是 2.5.7。我使用 "generate:doctrine:crud" 生成了一个 CRUD。

在每个条目的视图中，有一个删除按钮。我想在按钮内添加 CSS 类。

对于这个按钮，生成的代码是 -

```html Delete ```

{{ form(delete_form) }} 

通过浏览器检查，我获得了 -

<button type="submit" id="form_submit" name="form[submit]">Delete</button>

我已修改生成的Twig代码如下 -

{{ form_widget(delete_form, {'attr': {'class': 'btn btn-danger btn-lg'}}) }}

通过浏览器检查，我得到了 -

<div id="form" class="btn btn-danger btn-lg">
    <div>
        <button type="submit" id="form_submit" name="form[submit]">Delete</button>
    </div>
    <input type="hidden" id="form__token" name="form[_token]" value="JrBKKEdf1F8hBDYIzu0TP9a4fauKvmlPMGg3rHwwA3w">
 </div>

因此，该按钮现在看起来像这样 -

但我想让它像这样 -

因此，我的生成代码应该是这样的 -

<div>
    <button type="submit" id="form_submit" name="form[submit]" class="btn btn-danger btn-lg">Delete</button>
</div>

我尝试了像这样的代码，但它不起作用 - 它只显示普通的删除按钮，没有包含任何类 -

{{ form_widget(delete_form.submit, { 'label': 'Delete' }, { 'attr': {'class': 'btn btn-danger btn-lg', 'type': 'button'} }) }}

顺便提一下，如果没有以下twig代码，删除按钮将无法删除条目--

{{ form(delete_form) }}

如何在Twig中实现？

- Shahjalal

---

尝试从form_widget中删除此行 { 'label': 'Delete' },。 - Azam Alvi

我尝试了，按钮的外观已经改变了，但是现在删除按钮无法删除条目... :( - Shahjalal

Answer 1

我已经解决了问题.. :) 但不是从twig中..而是从控制器中..我已经在 createDeleteForm() 方法中添加了CSS类...

private function createDeleteForm($id)
    {
        return $this->createFormBuilder()
            ->setAction($this->generateUrl('book_delete', array('id' => $id)))
            ->setMethod('DELETE')
            ->add('submit', 'submit', array('label' => 'Delete', 
                                            'attr' => array('class' => 'btn btn-danger btn-lg')))
            ->getForm()
        ;
    }

但是我认为，这不是一个好的做法.. :(

- Shahjalal

---

顺便说一下，我总是在控制器中添加类和其他属性，而不是在twig中添加。 - Veve

最好的做法是将所有与前端相关的事情都保留在Twig中。 - Lord Zed

Answer 2

今日免费次数已满, 请开通会员/明日再来

{{ form_widget(delete_form.submit, { 'attr': {'class': 'btn btn-danger btn-lg', 'type': 'button'} }) }}

- Lord Zed

---

对我来说，这是最好的答案。.submit 做出了巨大的贡献。 - Marcos

这个对我有用，我使用了{{ form_widget(delete_form.submit, { 'attr': {'class': 'btn btn-danger'} }) }}。 - Davey Hoogland

Answer 3

这里的所有答案都可以将类添加到提交按钮。然而，如果只使用此行代码与delete_form.submit，表单将无法正常工作。完整的答案是：

{{ form_start(delete_form) }}
{{ form_widget(delete_form.submit, { 'attr': {'class': 'btn btn-danger', 'type': 'button'} }) }}
{{ form_end(delete_form) }}

根据文档的解释，form_widget不会渲染表单的开始和结束标签：

{# renders all fields #}
{{ form_widget(form) }}

{# renders all fields *and* the form start and end tags #}
{{ form(form) }}

- ana-lu

Answer 4

在Zed的回答基础上进行扩展，但我还需要在不触及TWIG模板以外的任何内容的情况下将标签翻译成另一种语言：

   {{ form_widget(delete_form.submit, {'label': 'Usuń', 'attr': {'class': 'btn btn-danger btn-lg', 'type': 'button', 'title': 'DELETE'} }) }}    

在同一页的后面，将默认的“更新”按钮进行了更改：

{{ form_widget(edit_form.submit, {'label': 'Zapisz', 'attr': {'class': 'btn btn-save  btn-lg', 'type': 'button', 'title': 'UPDATE'} }) }} 

- Marcos