Using TBBC Money/Currency Bundle for Symfony/Bootstrap Forms

Question

I don't think this question has been raised looking at the history and on google... I'm discovering symfony2 for a personal project and I'm not sure to take the problem the right way when it comes to implementing a form with TBBC Money/Currency bundle (found on packagist).

I have a "Expense" class containing a price field (type "Money") and for which I want to create a form.

In my "ExpenseType" file I have the following:

public function buildForm(FormBuilderInterface $builder, array $options) {
        $builder
                ->add('title', TextType::class)
                ->add('actualDate', DateType::class, array('widget' => 'single_text'))
                ->add('comment', TextareaType::class)
                ->add('price', MoneyType::class, array())
                ->add('user', 'entity', array(
                    'class' => 'VPAccountsBundle:User',
                    'property' => 'username'))
        ;
    }

On my twig file displaying the form I have:

<div class="row">
            <div class="col-lg-3 col-md-3 control-label">
                {{ form_label(form.price, "Amount" ) }}
            </div>
            <div class="col-lg-4 col-md-4">
                {{ form_widget(form.price , { 'attr':{ 'class':'form-control', 'placeholder':'Amount' } } ) }}
            </div>
            {{ form_errors(form.price) }}

        </div>

What I get is this .

What I would like to get is a bootstrap input with dropdown button (see mockup ). but I really don't know how to proceed.

Has anyone faced this kind of situation? Any help would be appreciated! :)

Thanks a lot.

Answer 1

Theme a widget or form in Symfony is well documented here and IMO you should go through Inside the same Template as the Form . You could extends from form_div_layout.html.twig and then on your custom template overrides how money_widget is render by changing the following block:

{%- block money_widget -%}
    {{ money_pattern|replace({ '{{ widget }}': block('form_widget_simple') })|raw }}
{%- endblock money_widget -%}

Hope it helps

Answer 2

Replying to myself... As correctly indicated in the bundle documentation I had to configure my config.yml to declare the new type to twig:

# config.yml
twig:
    form:
        resources:
            - 'TbbcMoneyBundle:Form:fields.html.twig'

The form elements are rendered much better and should be easily customizable.