我可以将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' }
}) }}

但是这样做，rendeded按钮显示如下：

<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。

  

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

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

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

富/ BarBundle /窗体/扩展/ 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
    }
}

富/ BarBundle /窗体/扩展/ 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'
        ]
    );

Answer 2

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

{%- block button_widget -%}
    {% set attr = attr|merge({class: (attr.class|default('btn-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 -%}
    <button type="{{ type|default('button') }}" {{ block('button_attributes') }}>{{ label|trans({}, translation_domain)|raw }}</button>
{%- endblock button_widget -%}

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

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

Answer 3

更简单的解决方案可能是将按钮从表单类型中删除，并设置name和value属性。然后像控制器中的普通post参数一样检索它们。

在你的模板中：

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

然后在您的控制器中

if ($form->isSubmitted() && $form->isValid()) {
    $clicked = $request->request->get('clicked');
}

Answer 4

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

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

在我的PHP控制器表单中，我没有添加任何按钮，只是输入字段。

   $form = $this->createFormBuilder($article)
        ->add('title',TextType::class, array(
            'data' => $article->getTitle(),
            'attr' => array('class' => 'form-control')))
        ->add('body', TextareaType::class, array(
            'data' => $article->getBody(),
            'required' => false,
            'attr' => array('class' => 'form-control')))
        ->getForm();

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

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');    
}

希望这可以提供帮助。很高兴说，即使是按钮对齐的问题也解决了，因为div没有像add方法那样为每个按钮添加。{/ p>

Answer 5

在Symfony 5.1上，您可以将html内容添加到按钮标签中，如下所示：

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

您需要传递选项"label_html" : true

您可以从 form_div_layout.html.twig 文件中查看原始的Symfony / Twig代码以了解它：

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