首页 > 解决方案 > 如何防止 Twig 将表单控件类添加到它生成的字段中?

问题描述

我有这个代码:

{% for key, customField in customFields %}
   {{ form_widget(formVirtualTerminal['cf_' ~ key], { 'attr': {'placeholder': customField['FieldDisplayName'], 'name': customField['FieldName'], 'class' : 'row no-gutters mb-3'} }) }} 
{% endfor %}

它遍历一个数组并为其输出一些字段。但是,由于我不知道的原因,form-control在所有这些字段中生成了一个类,这破坏了页面的设计。

在这个问题(删除 form-row symfony/twig 中的 form-control)中,提到这是默认 Bootstrap 主题的一部分,他们讨论了如何在应用程序级别停用该主题。

但是,如果可能的话,我宁愿不做这种激进的改变。我想告诉 Twig 不要添加课程。

以下是通过删除该类来解决问题的 hack:

$("#custom-text-field-container .form-control").removeClass("form-control");

但是,我想避免编写 Javascript 来从一开始就不应该拥有该类的字段中删除类。

有没有办法告诉 twig 不要在form-control这些文本字段中写入类?

标签: phpsymfonybootstrap-4twigsymfony-forms

解决方案


不更改主题就无法阻止它

您不能“告诉树枝不要添加课程”。

form_widget不接受任何参数来删除稍后将由主题应用的类或属性。

基本上,它无法控制模板的功能,它只向模板传递您想要的任何参数,并且取决于表单模板如何使用该信息。

例如,对于 HTML 类,通常的方法是将您传递的任何类与模板默认设置的任何类合并。


解决方法,同时保留您正在使用的大部分表单主题

一个简单的方法是根据您正在使用的表单主题创建您的主题(这似乎是' bootstrap_4_layout.html.twig ')

您只需要重写阻碍您的部分,而将其他所有内容保持原样。

例如,一个“完整”的新主题可以短至:

{# templates/form/your_theme.html.twig #}
{% use 'bootstrap_4_layout.html.twig' %}

{% block form_widget_simple -%}
    {% if type is not defined or type != 'hidden' %}
        {%- set attr = attr|merge({class: (attr.class|default('') ~ (type|default('') == 'file' ? ' custom-file-input' : ''))|trim}) -%}
    {% endif %}
    {%- if type is defined and (type == 'range' or type == 'color') %}
        {# Attribute "required" is not supported #}
        {%- set required = false -%}
    {% endif %}
    {{- parent() -}}
{%- endblock form_widget_simple %}

这和原来form_widget_simple的块几乎一样,我只是删除了与你可以通过的类合并的类。form-control

您可以通过在适当的模板中执行此操作,仅在您想要此自定义主题的模板中使用此表单:

{% form_theme form 'form/your_theme.html.twig' %}

或者,如果您想在应用程序的所有表单中默认使用它:

# config/packages/twig.yaml
twig:
    form_themes: ['form/your_theme.html.twig']
    # ...

推荐阅读