twig - 我可以将 html 放入带有 Twig 的 Symfony 表单按钮中吗？

Question

我正在尝试将 html 放入带有 Twig 的表单按钮中，例如:

{{ form_widget(form.jiraStatus, {
        'label': '<i class="fa fa-bug"></i>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>

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

谢谢!

Answer 1

是的，但您必须自定义 your form theme .

Note: This answer has been edited to be compatible with Symfony 2.8 3.x and 4.x. For older versions, please see the edit history.

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

<?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
    }
}

在您的 services.yml(或 xml 文件)中注册此扩展。别名必须与上述 getExtendedType()返回的字符串对应方法。

# Form extension for adding icons
foobar.form_extension.icon:
    class: Foo\BarBundle\Form\Extension\ButtonTypeIconExtension
    tags:
        - { name: form.type_extension, extended_type: Symfony\Component\Form\Extension\Core\Type\ButtonType }

接下来，覆盖您的 form_div_layout.html.twig . (见上面的链接)您现在可以使用 icon作为这些主题的变量。对于按钮，我们覆盖 button_widget堵塞:

{% 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 %}

最后，您可以在模板中使用图标选项:

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

或者在您的表单类中:

    $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 的额外扩展。所有表单字段(如输入框和选择元素)都继承自此类型。因此，如果您希望它同时使用表单字段和按钮，我建议如下:

创建抽象类 abstract class AbstractIconExtension extends AbstractTypeExtension与上面的内容完全相同，但省略了 getExtendedType方法。然后创建两个从此类扩展的类(例如 FieldTypeIconExtension 和 ButtonTypeIconExtension )，其中仅包含 getExtendedType方法。一返回 FormType的FQCN另一个返回 ButtonType的FQCN :

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

<?php

namespace Foo\BarBundle\Form\Extension;

use Symfony\Component\Form\Extension\Core\Type\ButtonType;

class ButtonTypeIconExtension extends AbstractIconExtension
{
    /**
     * Returns the name of the type being extended.
     *
     * @return string The name of the type being extended
     */
    public function getExtendedType()
    {
        return ButtonType::class;  // extend all buttons
    }
}

Foo/BarBundle/Form/Extension/FieldTypeIconExtension.php:

<?php

namespace Foo\BarBundle\Form\Extension;

use Symfony\Component\Form\Extension\Core\Type\FormType;

class FieldTypeIconExtension extends AbstractIconExtension
{
    /**
     * Returns the name of the type being extended.
     *
     * @return string The name of the type being extended
     */
    public function getExtendedType()
    {
        return FormType::class;  // extend all field types
    }
}

使用相应的别名在您的服务中注册这两个类:

# Form extensions for adding icons to form elements
foobar.form_extension.button_icon:
    class: Foo\BarBundle\Form\Extension\ButtonTypeIconExtension
    tags:
        - { name: form.type_extension, extended_type: Symfony\Component\Form\Extension\Core\Type\ButtonType }
foobar.form_extension.form_icon:
    class: Foo\BarBundle\Form\Extension\FieldTypeIconExtension
    tags:
        - { name: form.type_extension, extended_type: Symfony\Component\Form\Extension\Core\Type\FormType }

现在您可以使用 icon表单主题中其他地方的变量也是如此。例如，要将图标添加到标签，您可以覆盖 form_label堵塞:

{% 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('mytextfield', TextType::class, [
            'label' => 'My fancy text field',
            'icon' => 'fa-thumbs-o-up'
        ]
    );