Symfony change style of 'repeated' field

Question

I have a form with a repeated field:

$builder->add('password', 'repeated', array( 'type' => 'password' ));

I want this repeated field to render differently from the other fields - how do I do that? I'm new to Symfony and twig, so if you have suggestions with code, please add some information as to where to put the code.

My form.html.twig looks like this:

{{ form_widget(form) }}

Thanks in advance.

Answer 1

This is how i display my repeated field using twitter bootstrap, of course you can change those classes to the one you are using

<form action="{{ path('passwordReset') }}" method="post" role="form">
    {{ form_errors(form) }}
    <div class="login-screen">
        <h4>Reset Your Password</h4>

        <div class="login-form">
            <div class="form-group">
                {{ form_widget(form.password.first, { 'attr': {'class': 'form-control', 'placeholder': 'Enter your password', 'value':''}  }) }}
                {% if(form_errors(form.password.first)) %}
                    <div class="alert alert-danger">{{ form_errors(form.password.first) }}</div>
                {% endif %}
                <label class="login-field-icon fui-lock" for="login-password"></label>
            </div>
            <div class="form-group">
                {{ form_widget(form.password.second, { 'attr': {'class': 'form-control', 'placeholder': 'Confirm your password', 'value':''}  }) }}
                {% if(form_errors(form.password.second)) %}
                    <div class="alert alert-danger">{{ form_errors(form.password.second) }}</div>
                {% endif %}
                <label class="login-field-icon fui-lock" for="login-name"></label>
            </div>
            <button class="btn btn-primary btn-lg btn-block" type="submit">Submit</button>
            <a class="login-link" href="{{ path('login') }}">Sign in</a>
        </div>
    </div>
    {{ form_rest(form) }}
</form>

What you need are the following two

{{ form_widget(form.password.first, { 'attr': {'class': 'form-control', 'placeholder': 'Enter your password', 'value':''}  }) }}
{{ form_widget(form.password.second, { 'attr': {'class': 'form-control', 'placeholder': 'Confirm your password', 'value':''}  }) }}

Just assign them the class you want to assign them to make them look different.

Answer 2

Helo

'first_options' => array('label' => 'form.password','attr' => array('class' => 'mystyle'))

something like that in the formType, it add a class to your input element and let you customize.