Symfony 3.4, MoneyType, and Bootstrap

Question

I'm having a bit of difficulty styling a MoneyType form input the way I want. I want to use Bootstrap's input-group-addon class to prepend a dollar sign to the field, but what's actually happening is that two dollar signs are being rendered... one automatically generated by the MoneyType, and one that I manually wrote in my template:

Template:

<div class="form-group">
    {{ form_label(form.canonicalPrice) }}
    {{ form_errors(form.canonicalPrice) }}
    <div class="input-group">
        <span class="input-group-addon">$</span>
        {{ form_widget(form.canonicalPrice, { 'attr': {'id': 'price', 'class': 'form-control'} }) }}
    </div>
</div>

MoneyType definition in my form type class:

->add('canonicalPrice', MoneyType::class, array('label' => 'Price', 'currency' => 'USD'))

Screenshot:

So, is there a way for me to either:

Hide the automatic currency label that Symfony adds with a MoneyType field? Not specifying any currency defaults to a Euro rather than dollar, which isn't helpful.
Style the automatic label the way I want?

Note: I'm not using Symfony's Bootstrap form themes because I like having complete control over my templates. The fact that MoneyType fields default to showing a currency is very annoying.

You should be able to extend the MoneyType and override what you want there. — Arleigh Hix

Dylan Kas Dylan Kas · Accepted Answer · 2019-04-19T07:10:13

Style the automatic label :

The dollar sign that is prepend to the input is from the money_pattern attribute of MoneyType So as the doc on MoneyType says you can :

Modify in it the view :

{{ form_row(form.value, { 'money_pattern': '{{ widget }} $' }) }}

or like this

{% block money_widget %}
    {%- set type = type|default('number') -%}
    {{ parent() }}
{% endblock %}

Modify it in the builder :

Use money_pattern in the FormType and set the pattern you want.

Symfony 3.4, MoneyType, and Bootstrap

1 Answers