Symfony2 - Formbuilder - Add a Class to The Field and Input

Symfony2 - FormBuilder - add a class to the field and input

The class of a field is part of the presentation layer of your application, so it is best to create a twig theme for your forms:

Create a file fields.html.twig in Resources/views/Form of your Bundle and define how your form row will be formated, for example:

{% block field_row %}
<div class="row">
    {{ form_errors(form) }}
    {{ form_label(form) }}
    {{ form_widget(form, { 'attr': {'class': 'c4'} }) }}
</div>
{% endblock field_row %}

If you want to customize only certain field, for example the field fieldName of the form formName, customize the row:

{% block _formName_fieldName_row %}
<div class="row">
    {{ form_label(form) }}
    {{ form_errors(form) }}
    {{ form_widget(form, { 'attr': {'class': 'c4'} }) }}
</div>
{% endblock %}

EDIT: customize only the field:

{% block _formName_fieldName_widget %}
    {% set type = type|default('text') %}
    <input type="{{ type }}" {{ block('widget_attributes') }} value="{{ value }}" class="c4" />
{% endblock %}

Then in all the form templates you want it use this theme add:

{% form_theme form 'MyBundle:Form:fields.html.twig' %}

This is explained in depth in the cookbook

How to set a class attribute to a Symfony2 form input

You can do this from the twig template:

{{ form_widget(form.birthdate, { 'attr': {'class': 'calendar'} }) }}

From http://symfony.com/doc/current/book/forms.html#rendering-each-field-by-hand

How can I add an element into form created with formbuilder (Symfony)?

As @Ahmed EBEN HASSINE said, prefers twig form theming https://symfony.com/doc/current/form/form_customization.html#adding-help-messages

Inside one template

{% use 'form_div_layout.html.twig' with form_widget_simple as base_form_widget_simple %}

{% block form_widget_simple %}
    {{ block('base_form_widget_simple') }}
    <span class="info" data-name="{{ full_name }}">
{% endblock %}

{# rest of your code #}

For all your templates, create a base file

{# template/form/fields.html.twig #}
{% extends 'form_div_layout.html.twig' %}

{% block form_widget_simple %}
    {{ parent() }}

    <span class="info" data-name="{{ full_name }}">
{% endblock %}

and declare it in your configuration

# config/packages/twig.yaml
twig:
    form_themes:
        - 'form/fields.html.twig'

How to add CSS class to select element on a Symfony generated form?

To add the class to the select, move the attr array to the entry_options:

$builder
// (...)
->add('roles', CollectionType::class, [
        'entry_type'   => ChoiceType::class,
        'entry_options'  => [
            'attr' => ['class' => 'MyClass'],
            'label' => 'Select a role',
            'label_attr' => [
                'class' => 'form-label'
            ],
            'choices' => [
                'User' => 'ROLE_USER',
                'Admin' => 'ROLE_ADMIN',
            ],
        ],
    ])
// (...)

Symfony2 forms how to set class for choice input fields?

in case to set the input field class i ovveride the radio widget

in my form template i added:

{% form_theme form 'ApplicationsBundle:Form:fields.html.twig' %}

and here is my fields.html.twig:

{% block radio_widget %}
{% spaceless %}
<input type="radio" class="star" {{ block('widget_attributes') }}{% if value is defined %} value="{{ value }}"{% endif %}{% if checked %} checked="checked"{% endif %} disabled="disabled"/>
{% endspaceless %}
{% endblock radio_widget %}

also to make it work you need to call your form as:

{{ form_widget(form) }}

Apply class to Symfony2 Form Label and Div

Fields are required by default. You have to specify 'required' => false to avoid it.

->add('email','text',array(
      'required' => false,
      'label_attr' => array(
          'class' =>  'CUSTOM_LABEL_CLASS'
       ),
))

About your second question, the simplest way would be to add code in the template :

{{ form_start(form) }}
    <div class="myClass">
        {{ form_widget(email) }}
    </div>
{{ form_end(form) }}

Or create a new specific form block, or also modify existing one : http://symfony.com/doc/current/cookbook/form/form_customization.html#form-theming

Symfony2 add custom field to form builder

What you have to do is :

->add('yourfield', 'choice', array(
            'label' => 'Your Field',
            'required' => false,
            'choices'  => array(true => 'Yes', false => 'No'),
            'empty_value' => false,
            'mapped' => false                
        ))

Pay attention to 'mapped' => false . It means that this field has nothing to do with your entity(object) . It does not exist in your Class at all.

Doing this, you will be able to add as many additional fields you want.

How to add class attribute in symfony form

Either you do it in your builder, controller or your view.

Controller :

$form = $this->createForm(new FormType(), $data, array('attr' => array('class' => 'class')));

View (Twig) :

{{ form_start(form, { 'attr' : { 'class': 'class' } }) 

As Joe pointed out source here

How add a class to a label element with Symfony forms?

You can see the label_attr parameter in symfony docs

'label'=>"Notes,array('label_attr' => array('class' => 'class_name'))"

add class atribute to symfony form builder row div

Symfony2/Twig has a wonderful form rendering engine; it'd be a waste to completely override it. As a much more elegant alternative, we can take advantage of the built-in form themes. As per the documentation:

Symfony comes with four built-in form themes that define each and every fragment needed to render every part of a form

We can override the default theme and create our own. This allows us to override the form_row block, and add our own lovely attributes to the surrounding div. Simply put this in a file, say: views/forms/fields.twig.

{% block form_row %}

    <div class="form-group">
        {{ form_label(form) }}
        {{ form_errors(form) }}
        {{ form_widget(form) }}
    </div>

{% endblock %}

We don't need to worry about the other declarations, as Symfony will overload only what's changed.

We can now reference it from the page template. Replace form with the name of the form variable passed to the template:

{% form_theme form 'forms/fields.twig' %}

Of course, you're free to add a declaration to grab a form attribute instead of hard-coding the class name.

(Source: http://symfony.com/doc/2.7/cookbook/form/form_customization.html)

---

Related Topics