setting a placeholder attribute with translation in Symfony2 form input

Question

I am using FOSUserBundle for managing my users. In order to register user, I reused the form of the bundle which meets my needs. Nevertheless, I needed to set some attributes of my fields. This is was done easyly by twig like this:

    {{ form_widget(form.username, { 'attr': {'class': "span12",
        'placeholder': "Username"} }) }}

Now, my goal is to make automatic translation on my placeholder, so I proposed this code:

    {{ form_widget(form.username, { 'attr': {'class': "span12",
        'placeholder': "{{'security.login.usernameplaceholder'|trans}}"} }) }}

This previous code produced an input with placeholder value equal to {{'security.login.usernameplaceholder'|trans}}

To get rid of this problem, I tried to set variable for that but symfony generated an error!!!

    {% set usernameplaceholder = {{'security.login.usernameplaceholder'|trans}} %}
    {{ form_widget(form.username, { 'attr': {'class': "span12",
        'placeholder': usernameplaceholder} }) }}

Is there any proposition to solve this problem?

Thanks,

Quickman

Answer 1

In Twig you shouldn't put {{ within {{ (same for {%); think of it as the php tag.

The following should work

{% set usernameplaceholder = 'security.login.usernameplaceholder'|trans %}
{{ form_widget(form.username, { 'attr': {'class': "span12",
    'placeholder': usernameplaceholder} }) }}

OR

{{ form_widget(form.username, { 'attr': {'class': "span12",
    'placeholder': 'security.login.usernameplaceholder'|trans} }) }}

Utopianism

Answer 2

For Symfony 3.x, 4.x

Another way to add placeholders (or any attributes for that matter) is by passing an options-array to the form $builder containing another Array attr with attributes as key-value pairs.

// The parameters are column name, form-type and options-array respectively.
$builder->add('field', null, array(
            'attr' => array(
                 'placeholder' => 'support.contact.titleplaceholder'
             )
        ));

Penang

I did a little testing in Symfony 3.4 and it seems that this will not be translated automatically. Any suggestions on how to get the translation with this approach? – Lurk

I wonder about this as well, does seem to get auto translated – Commination

you could add in another attribute 'translation_domain' => 'fooo' where fooo refers to your translation file fooo.de.xlf as per this SO post – Penang

Answer 3

You can translate this way as well (Using symfony4) in twig: In a form placeholder wich would be written like this:

{'attr':{'placeholder': "Text to translate"}}

As for a placeholder in html wich would be written like this, you can translate this way:

<input placeholder="{{"Text to translate"|trans }}">

Spitfire

Answer 4

If you want to set the placeholder in the form-type (and not in the template) you must the placeholder inside the attr option. For example:

->add('search', TextType::class, ['attr' => ['placeholder' => 'form.custom.placeholder']])

To have the placeholder then translated in the background, you must adjust the form-theme. In our case we wanted to trigger automatic translation only if the translation_domain is set explicitly in the form-type. This is how we achieved automatic translation:

{% block form_widget_simple -%}
    ....
    {% if attr.placeholder|default and translation_domain|default %}
        {%- set attr = attr|merge({placeholder: (attr.placeholder|trans({}, translation_domain))|trim}) -%}
    {% endif %}
    ....
{{- parent() -}}
{%- endblock form_widget_simple %}

If you want to always trigger automatic translation. This should work:

{% block form_widget_simple -%}
    ....
    {%- set attr = attr|merge({placeholder: (attr.placeholder|default|trans({}, translation_domain))|trim}) -%}
    ....
{{- parent() -}}
{%- endblock form_widget_simple %}

Melancon

Answer 5

You can also add it to your form definition like this:

    $builder
        ->add('information', 'textarea', array(
            'label' => false,
            'required' => true,
            'constraints' => [
                new NotBlank()
            ], 
            'attr' => [
               'placeholder' => 'support.contact.titleplaceholder'
            ]
        ));

Adallard

placeholder should be inside the "attr" like: 'label' => false, 'attr' => array('placeholder' => 'support.contact.titleplaceholder'.. – Autography

@Autography Updated – Adallard