Answer the question
In order to leave comments, you need to log in
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'],
])
<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>
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) }}
// 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
Extremely comprehensive answer from this link https://symfony.com/doc/current/form/form_customiz...
Didn't find what you were looking for?
Ask your questionAsk a Question
731 491 924 answers to any question