CODEWITHSUNDEEP
symfonysymfony-forms
Loctarogar
Loctarogar

Reputation: 620

How to make RadioButton in Symfony Form?

I have form that i have to redo with Symfony Form but i stuck on this place:

<div class="currency-label">
    <input checked id="cur1" name="currency" type="radio">
    <label for="cur1">EURO</label>
</div>
<div class="currency-label active">
    <input id="cur2" name="currency" type="radio">
    <label for="cur2">USD</label>
</div>

This is how it looks: how it should look

how to make radiobutton with Symfony Forms? In my form class i added:

->add('vacancyCurrency', RadioType::class, ['required' => false])

and to my template

{{ form_widget(form.vacancyCurrency) }}

my form became shorter and obviously no css : how it looks without css and if i add css class to form it looks differently :

{{ form_widget(form.vacancyCurrency, {'attr':
      {'class': 'currency-label'}
}) }}

description 1

Upvotes: 4

Views: 15382

Answers (2)

Loctarogar
Loctarogar

Reputation: 620

So that is how i solved this, in template:

 {{ form_start(form) }}
 {% form_theme form _self %}
 {% block choice_widget %}
     {% for child in form.vacancyCurrency %}
         <div class="currency-label">
             {{- form_widget(child) -}}
             {{- form_label(child, null) -}}
         </div>
     {% endfor %}
 {% endblock choice_widget %}
 {{ form_end(form) }}

in form class:

->add('vacancyCurrency', ChoiceType::class, [
    'choices' => [
        'USD' => 'USD',
        'RUB' => 'RUB',
    ],
    'expanded' => true,
])

and to make one of them active i set default data in model:

public $vacancyCurrency = 'RUB';

Update

now i have interface for currency and use it in form class:

->add('currency', ChoiceType::class, [
    'label' => 'Валюта',
    'choices' => \array_combine(CurrencyInterface::ALL, CurrencyInterface::ALL)
])

Upvotes: 7

Caconde
Caconde

Reputation: 4483

The best way to do it is to render a ChoiceType as radio buttons:

->add(
    'vacancyCurrency', 
    ChoiceType::class, 
    [
        'choices' => [
            'US Dolar' => 'usd',
            'Euro' => 'eur',
        ],
    'expanded' => true
    ]
);

The ChoiceType field it's rendered as radio buttons when you have the options multiple = false and expanded = true. The option multiple is not in the code above because its default value is false. You can find more details here

Edit:

In your twig template, you just need to add:

{{ form_widget(form.vacancyCurrency) }}

Edit 2

You said in the comments to this answer that you need to put each radio button inside a <div class="currency-label active">. I believe you can't do it by setting attributes in the Symfony Form Field itself. The options you have there, like choice_attr operate in the input, not in the divs that surround it.

It's possible to achieve what you want, but you'll need to write some code and render the radio buttons by hand, like: 

<div class="form-group">
    <label class="control-label required">Vacancy currency</label>
    {% for child in form.vacancyCurrency %}
        <div class="currency-label active">
            <label for="{{ child.vars.id }}" class="required">
                <input type="radio" id="{{ child.vars.id }}" name="{{ form.vars.id ~ '[' ~ form.vacancyCurrency.vars.name ~ ']' }}" required="required" class="checkbox" value="{{ child.vars.label }}">
                {{ child.vars.label }}
            </label>
        </div>
    {% endfor %}
</div>

Of course, you can use some Javascript to do the job. For example, you can render the form field like:

{{ form_widget(form.vacancyCurrency) }}

It will add each radio button inside a div with class="radio".

Then you can change the class to what you want as soon as the page is ready with some JQuery:

$(document).ready(function() {
    $(".radio").attr("class", "currency-label active");
});

Upvotes: 12

Related Questions