Как перекрыть атрибуты формы в FormBuilder?

Question

hiimnotwordy @hiimnotwordy

full-stack

Как перекрыть атрибуты формы в FormBuilder?

Бутстрап из коробки установленный на симфонию выдает форму с помощью FormBuilder с div class="form-group" и со стандартным классом form-control-label и input с классом form-control-file.

Для улучшения внешнего вида кнопки загрузки файлов бутстрап предлагает использовать другие классы https://getbootstrap.com/docs/4.0/components/forms... Для div class="custom-file" и custom-file-label с custom-file-input для элементов этого контейнера.

Вопрос: есть ли возможность формбилдером выгонять форму сразу с нужными мне классами без классов по умолчанию?
Пробую так:

$builder
            ->add('imageFile', FileType::class, [
                'required' => true,
                'attr' => ['class' => 'custom-file-input'],
            ])

Получаю дописанный к стандартному класс: class="custom-file-input form-control-file", а нужен просто class="custom-file-input".

И как в формбилдере перезаписать класс div в данном контексте не нашел в доке: https://symfony.com/doc/4.0/best_practices/forms.html

Из этого:

<div class="form-group">
    <label class="form-control-label required" for="image_imageFile"></label>
    <input type="file" id="image_imageFile" name="image[imageFile]" required="required" class="form-control-file">
</div>

Мне надо получить это:

<div class="custom-file">
    <label class="custom-file-label required" for="image_imageFile">Choose file</label>
    <input type="file" id="image_imageFile" name="image[imageFile]" required="required" class="custom-file-input">
</div>

UPD: сделал так (готовое решение, вдруг кому понадобится)

form_div_layout_custom.html.twig

{# https://getbootstrap.com/docs/4.0/components/forms/?#file-browser #}

{%- block form_row -%}
    <div class="custom-file">
        {{- form_widget(form) -}}
        {{- form_label(form) -}}
        {{- form_errors(form) -}}
    </div>
{%- endblock form_row -%}


{%- block form_start -%}
    {%- do form.setMethodRendered() -%}
    {% set method = method|upper %}
    {%- if method in ["GET", "POST"] -%}
        {% set form_method = method %}
    {%- else -%}
        {% set form_method = "POST" %}
    {%- endif -%}
    <form name="{{ name }}" method="{{ form_method|lower }}"{% if action != '' %} action="{{ action }}"{% endif %}{% for attrname, attrvalue in attr %} {{ attrname }}="{{ attrvalue }}"{% endfor %}{% if multipart %} enctype="multipart/form-data"{% endif %}>
    {%- if form_method != method -%}
        <input type="hidden" name="_method" value="{{ method }}" />
    {%- endif -%}
{%- endblock form_start -%}


{%- block form_errors -%}
    {%- if errors|length > 0 -%}
    <div class="invalid-feedback">
            {%- for error in errors -%}
                {{ error.message }}
            {%- endfor -%}
    </div>
    {%- endif -%}
{%- endblock form_errors -%}

И в самом темплэйте:

image.html.twig

{# https://getbootstrap.com/docs/4.0/components/forms/?#file-browser #}
                {% form_theme form 'form/form_div_layout_custom.html.twig' %}

                {% if form_errors(form.imageFile) != '' %}
                    {{ form_start(form, { 'attr': {'class': 'was-validated'} }) }}
                {% else %}
                    {{ form_start(form) }}
                {% endif %}

                    {{ form_row(form.imageFile) }}

                <button type="submit" class="btn mt-3 mb-3 btn-default btn-primary btn-block" formnovalidate>{{ 'button.save'|trans }}</button>

                {{ form_end(form) }}

И вывод имени файла с помощью JS (jquery-3.2.1):

// Set file name for label file-browser {# https://getbootstrap.com/docs/4.0/components/forms/?#file-browser #}
$('.custom-file-input').on('change',function(){

var fileName = $(this).val().split('\\').pop();

    $("#original-file-name").text(fileName);
})