H
H
hiimnotwordy2018-06-14 19:19:53
symfony
hiimnotwordy, 2018-06-14 19:19:53

How to override form attributes in FormBuilder?

The bootstrap out of the box set to symphony renders the form using a FormBuilder with div class="form-group" and with the default form-control-label class and input with the form-control-file class.
To improve the appearance of the file upload button, bootstrap suggests using other classes https://getbootstrap.com/docs/4.0/components/forms... For div class="custom-file" and custom-file-label with custom-file- input for the elements of this container.
Question: is it possible for the formbuilder to expel the form immediately with the classes I need without the default classes?
I try like this:

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

I get a class added to the standard: class="custom-file-input form-control-file", but I just need class="custom-file-input".
And how to overwrite the div class in the form builder in this context, I did not find it in the dock: https://symfony.com/doc/4.0/best_practices/forms.html
From this:
<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>

I need to get this:
<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: did this (ready-made solution, all of a sudden someone needs it)
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 -%}

And in the template itself:
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) }}

And outputting the filename with 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);
})

Answer the question

In order to leave comments, you need to log in

3 answer(s)
G
Gennady Knyazkin, 2018-06-14
@GennadyX

try in twig to redefine the input widget of the file type

D
Denis, 2018-06-14
@prototype_denis

Extremely comprehensive answer from this link https://symfony.com/doc/current/form/form_customiz...

H
hiimnotwordy, 2018-06-15
@hiimnotwordy

Thanks Dennis - just what you need.

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question