Twig 我可以把html放在一个带有细枝的Symfony表单按钮中吗？

我正在尝试将html放入一个表单按钮中，其中包含类似以下的小树枝：

{{ form_widget(form.jiraStatus, {
        'label': '<i class="fa fa-bug"></i>Bug',
        'attr':{'class': 'btn btn-large btn-default btn-block' }
}) }}

{{form_小部件（form.jiraStatus{
'label'：'Bug'，
'attr'：{'class'：'btn btn large btn default btn block'}
}) }}

但执行此操作时，“渲染”按钮显示如下：

<button type="submit" name="SolveTask[taskTypesFormObj][bugStatus]"
    class="btn btn-large btn-default btn-block">
    &lt;i class=&quot;fa fa-bug&quot;&gt;&lt;/i&gt;Bug
</button>

{{ form_widget(form.submit, { 'label': '<i class="fas fa-calculator"></i> Calculate prices', 'label_html' : true })}}

i class=“fa-fa-bug”/iBug

如您所见，按钮内的html已编码。我尝试使用原始过滤器，但效果相同。有办法做到这一点吗

---

谢谢

是的，但您必须定制

注意：此答案已编辑为与Symfony 2.8 3.x和4.x兼容。对于旧版本，请参见编辑历史记录

支持按钮中图标的一个好方法是使用表单扩展。首先创建一个表单扩展类，该类定义可在表单中使用的新属性图标：

<?php

namespace Foo\BarBundle\Form\Extension;

use Symfony\Component\Form\AbstractTypeExtension;
use Symfony\Component\Form\FormBuilderInterface;
use Symfony\Component\Form\FormInterface;
use Symfony\Component\Form\FormView;
use Symfony\Component\Form\Extension\Core\Type\ButtonType;
use Symfony\Component\OptionsResolver\OptionsResolver;

class ButtonTypeIconExtension extends AbstractTypeExtension
{
    /**
     * @param FormBuilderInterface $builder
     * @param array                $options
     */
    public function buildForm(FormBuilderInterface $builder, array $options)
    {
        $builder->setAttribute('icon', $options['icon']);
    }

    /**
     * @param FormView      $view
     * @param FormInterface $form
     * @param array         $options
     */
    public function buildView(FormView $view, FormInterface $form, array $options)
    {
        $view->vars['icon'] = $options['icon'];
    }

    /**
     * @param OptionsResolver $resolver
     */
    public function configureOptions(OptionsResolver $resolver)
    {
        $resolver->setDefaults(['icon' => null]);
        $resolver->setDefined(['icon']);
    }

    /**
     * Returns the name of the type being extended.
     *
     * @return string The name of the type being extended
     */
    public function getExtendedType()
    {
        return ButtonType::class; // Extend the button field type
    }
}

接下来，覆盖您的

表单\u div\u layout.html.twig

。（参见上面的链接）您现在可以使用

图标

作为这些主题中的变量。对于按钮，我们覆盖

按钮\u小部件

块：

{% block button_widget -%}
    {% set attr = attr|merge({class: (attr.class|default('') ~ ' btn')|trim}) %}
    {% if label is empty -%}
        {%- if label_format is not empty -%}
            {% set label = label_format|replace({
                '%name%': name,
                '%id%': id,
            }) %}
        {%- else -%}
            {% set label = name|humanize %}
        {%- endif -%}
    {%- endif -%}
    {% if icon|default %}
        {% set iconHtml = '<i class="fa ' ~ icon ~ '"></i> ' %}
    {% else %}
        {% set iconHtml = '' %}
    {% endif %}
    <button type="{{ type|default('button') }}" {{ block('button_attributes') }}>{{ iconHtml|raw }}{{ label|trans({}, translation_domain) }}</button>
{%- endblock button_widget %}

{% block form_label -%}
    {% if label is not sameas(false) -%}
        {% if not compound -%}
            {% set label_attr = label_attr|merge({'for': id}) %}
        {%- endif %}
        {% if required -%}
            {% set label_attr = label_attr|merge({'class': (label_attr.class|default('') ~ ' required')|trim}) %}
        {%- endif %}
        {% if label is empty -%}
            {%- if label_format is not empty -%}
                {% set label = label_format|replace({
                    '%name%': name,
                    '%id%': id,
                }) %}
            {%- else -%}
                {% set label = name|humanize %}
            {%- endif -%}
        {%- endif -%}
        {% if icon|default %}
            {% set iconHtml = '<i class="fa ' ~ icon ~ '"></i> ' %}
        {% else %}
            {% set iconHtml = '' %}
        {% endif %}
        <label{% for attrname, attrvalue in label_attr %} {{ attrname }}="{{ attrvalue }}"{% endfor %}>{{ iconHtml|raw }}{{ label|trans({}, translation_domain) }}</label>
    {%- endif %}
{%- endblock form_label %} 

或者在您的表单类中：

    $builder
        ->add('jiraStatus', SubmitType::class, [
                'label' => 'Bug',
                'icon' => 'fa-bug',
                'attr' => [
                    'class' => 'btn btn-large btn-default btn-block',
                ],
            ]
        );

注意：通常最好在模板中添加图标，因为图标是一个表示问题，而表单类实际上应该是关于业务逻辑的

让它更通用：

通过在getExtendedType（）中返回ButtonType的FQCN，我们告诉Symfony我们正在扩展从ButtonType继承的所有可能的表单元素，例如SubmitType。不幸的是，没有一种类型可以用来针对所有可能的表单元素，但我们可以添加一个额外的扩展来针对FormType。所有表单字段（如输入框和选择元素）都继承自此类型。因此，如果希望它同时使用表单字段和按钮，我建议如下：

创建一个抽象类

抽象类AbstractIconExtension扩展AbstractTypeExtension

，其内容与上述内容完全相同，但省略了

getExtendedType

方法。然后创建从该类扩展的两个类（例如

FieldTypeIconExtension

和

ButtonTypeIconExtension

），它们只包含

getExtendedType

方法。一个返回

FormType

的FQCN，另一个返回

ButtonType

的FQCN：

Foo/BarBundle/Form/Extension/ButtonTypeIconExtension.php：

现在，您还可以在表单主题的其他位置使用

图标

变量。例如，要向标签添加图标，可以覆盖

form\u标签

块：

{% block button_widget -%}
    {% set attr = attr|merge({class: (attr.class|default('') ~ ' btn')|trim}) %}
    {% if label is empty -%}
        {%- if label_format is not empty -%}
            {% set label = label_format|replace({
                '%name%': name,
                '%id%': id,
            }) %}
        {%- else -%}
            {% set label = name|humanize %}
        {%- endif -%}
    {%- endif -%}
    {% if icon|default %}
        {% set iconHtml = '<i class="fa ' ~ icon ~ '"></i> ' %}
    {% else %}
        {% set iconHtml = '' %}
    {% endif %}
    <button type="{{ type|default('button') }}" {{ block('button_attributes') }}>{{ iconHtml|raw }}{{ label|trans({}, translation_domain) }}</button>
{%- endblock button_widget %}

{% block form_label -%}
    {% if label is not sameas(false) -%}
        {% if not compound -%}
            {% set label_attr = label_attr|merge({'for': id}) %}
        {%- endif %}
        {% if required -%}
            {% set label_attr = label_attr|merge({'class': (label_attr.class|default('') ~ ' required')|trim}) %}
        {%- endif %}
        {% if label is empty -%}
            {%- if label_format is not empty -%}
                {% set label = label_format|replace({
                    '%name%': name,
                    '%id%': id,
                }) %}
            {%- else -%}
                {% set label = name|humanize %}
            {%- endif -%}
        {%- endif -%}
        {% if icon|default %}
            {% set iconHtml = '<i class="fa ' ~ icon ~ '"></i> ' %}
        {% else %}
            {% set iconHtml = '' %}
        {% endif %}
        <label{% for attrname, attrvalue in label_attr %} {{ attrname }}="{{ attrvalue }}"{% endfor %}>{{ iconHtml|raw }}{{ label|trans({}, translation_domain) }}</label>
    {%- endif %}
{%- endblock form_label %} 

---

如果您正在寻找更简单的解决方案，只需将其插入到您的：

{%-block button\u widget-%}
{%set attr=attr | merge（{class:（attr.class | default（'btn-default'）~'btn'）| trim}）%}
{%-如果标签为空-%}
{%-如果标签_格式不是空-%}
{%set label=label|U格式|替换({
“%name%”：名称，
“%id%”：id，
}) %}
{%-else-%}
{%set label=name |人性化%}
{%-endif-%}
{%-endif-%}
{{label | trans（{}，translation_domain）{raw}
{%-endblock按钮\小部件-%}

然后，您可以继续在按钮标签中插入HTML：

{{ form_widget(searchForm.search, {'label': '<span class="glyphicon glyphicon-search" aria-hidden="true"></span>'}) }}

{{form_小部件（searchForm.search，{'label'：''}}

一个更简单的解决方案可能是将按钮保留在表单类型之外，并设置

名称

和

值

属性。然后像在控制器中正常post参数一样检索它们

在模板中：

{{ form_widget(form.jiraStatus, {
    'icon': 'fa-bug',
    'label': 'Bug',
    'attr':{'class': 'btn btn-large btn-default btn-block' }
}) }}

{{ form_start(form) }}

<button name="clicked" value="saveDraft" class="btn btn-warning">
  <i class="fa fa-square-o"></i> Save as Draft
</button>
<button name="clicked" value="saveComplete" class="btn btn-warning">
  <i class="fa fa-check-square-o"></i> Save as Complete
</button>

{{form_start(form)}}
{{form_widget(form)}}
<div class="class row">
    <div class="class col-sm-offset col-sm-10">
        <button name='create' type='submit' value='create' class='btn btn-primary'>Save</button>
        <button name='cancel' type='submit' value='cancel' class='btn btn-cancel' formnovalidate='formnovalidate'>Cancel</button>
    </div>
</div>
{{form_end(form)}}

---

这就是我用Symfony 4解决和测试的方法。 在细枝模板中：

{{ form_widget(form.jiraStatus, {
    'icon': 'fa-bug',
    'label': 'Bug',
    'attr':{'class': 'btn btn-large btn-default btn-block' }
}) }}

{{ form_start(form) }}

<button name="clicked" value="saveDraft" class="btn btn-warning">
  <i class="fa fa-square-o"></i> Save as Draft
</button>
<button name="clicked" value="saveComplete" class="btn btn-warning">
  <i class="fa fa-check-square-o"></i> Save as Complete
</button>

{{form_start(form)}}
{{form_widget(form)}}
<div class="class row">
    <div class="class col-sm-offset col-sm-10">
        <button name='create' type='submit' value='create' class='btn btn-primary'>Save</button>
        <button name='cancel' type='submit' value='cancel' class='btn btn-cancel' formnovalidate='formnovalidate'>Cancel</button>
    </div>
</div>
{{form_end(form)}}

我所做的检查表单提交是：

if($form->isSubmitted() ){
    if($request->request->get('create') && $form->isValid()){
        $article = $form->getData();
        $entityManager = $this->getDoctrine()->getManager();
        $entityManager->persist($article);
        $entityManager->flush();
    } //l'alternativa può solo essere il cancel
    return $this->redirectToRoute('article_list');    
}

---

希望这能有所帮助。很好地说，甚至按钮对齐的问题也得到了解决，因为不是像表单

add

方法那样为每个按钮添加

div

。

在Symfony 5.1上，您可以像下面这样将html内容添加到按钮标签中：

<button type="submit" name="SolveTask[taskTypesFormObj][bugStatus]"
    class="btn btn-large btn-default btn-block">
    &lt;i class=&quot;fa fa-bug&quot;&gt;&lt;/i&gt;Bug
</button>

{{ form_widget(form.submit, { 'label': '<i class="fas fa-calculator"></i> Calculate prices', 'label_html' : true })}}

---

谢谢，我喜欢这个解决方案，干净且可重复使用。感谢Xatoo:）仅对其他人而言，服务的属性名称是扩展的\u type而不是扩展的-type@PatricRobertGutersohn非常感谢。我已经编辑了我的答案。@Xatoo setDefaultOptions表单类型扩展中的选项在Symfony 3中不再存在（以及其他任何地方）。现在称为配置选项。在Symfony 2.8中也可以使用@MilesM（也可能是2.7，不确定它何时被弃用）。我目前正在做这个（Symfony 4.1.1），它工作得很好！这对我来说很有效，尽管我会回来，但它会破坏正常的按钮。无论如何，谢谢你：）

{{ form_widget(form.submit, { 'label': '<i class="fas fa-calculator"></i> Calculate prices', 'label_html' : true })}}

{%- block button_widget -%}
    {%- if label is empty -%}
        {%- if label_format is not empty -%}
            {% set label = label_format|replace({
                '%name%': name,
                '%id%': id,
            }) %}
        {%- elseif label is not same as(false) -%}
            {% set label = name|humanize %}
        {%- endif -%}
    {%- endif -%}
    <button type="{{ type|default('button') }}" {{ block('button_attributes') }}>
        {%- if translation_domain is same as(false) -%}
            {%- if label_html is same as(false) -%}
                {{- label -}}
            {%- else -%}
                {{- label|raw -}}
            {%- endif -%}
        {%- else -%}
            {%- if label_html is same as(false) -%}
                {{- label|trans(label_translation_parameters, translation_domain) -}}
            {%- else -%}
                {{- label|trans(label_translation_parameters, translation_domain)|raw -}}
            {%- endif -%}
        {%- endif -%}
    </button>
{%- endblock button_widget -%}