Symfony2 Form Type - how to set form CSS class as attribute?

Question

When I set CSS class in form controller and pass it as $options array element it works.

private function createEditForm(OrderCard $entity)
{
    $form = $this->createForm(new OrderCardType($this->get('security.context')
                                       ->isGranted('ROLE_SUPER_ADMIN')), $entity, array(
        'action' => $this->generateUrl('ordercard_update', array('id' => $entity->getId())),
        'attr'=>array(
                 'class'=>'form-horizontal'
                )
    ));

    return $form;
}

But when I want to have same effect using formType it is not added to form:

public function buildForm(FormBuilderInterface $builder, array $options)
{
      $builder
          // not works
          ->setAttribute('attr', array('class' => 'form-horizontal'))
          // not works either
          ->setAttribute('class', 'form-horizontal')
//...

What I do wrong? How to make it work?

Answer 1

This can be done from several places:

1. define in setDefaultOptions method of Form Type class
2. As a parameter of $this->createForm function called from controller.
3. define in buildView method of Form Type class
4. In template while rendering form

You just to know which option has precedence over another, and how they work.

Option 1: Here is the place to set default options. If no where else set the value this default value will be used.

Example Implementation (As Pivot provided):

/**
 * @param OptionsResolverInterface $resolver
 */
public function setDefaultOptions(OptionsResolverInterface $resolver)
{
    $resolver->setDefaults(array(
        'attr' => array(
            'class' => 'form-horizontal-from-default'
        ),
    ));
}

Option 2: You already know this, you can provide the attr value while calling $this->createForm from controller(which is actually a shortcut for $this->container->get('form.factory')->create function). When you provide this value, the value set from previous option will overridden.

Example Implementation (As You provided):

$this->createForm($formTypeObject, $entity, array(
    'action' => 'URL,
    'attr'=>array('class'=>'form-horizontal')
));

Option 3: You can set or override the value set by previous two option here. setting the value in buildView method. Declare following method in your Form Type Class:

/**
 * {@inheritdoc}
 */
public function buildView(FormView $view, FormInterface $form, array $options)
{              
    $options['attr']['class'] = 'form-horizontal-from-build-view';
    //If you like to keep value set from previous methods you can define like
    //$options['attr']['class'] = isset($options['attr']['class'])? $options['attr']['class'] :'';
    //$options['attr']['class'] .= ' form-horizontal-from-build-view';

    $view->vars = array_replace($view->vars, array(
        'attr'  => $options['attr'],
    ));
}

Option 4: : Now the final and ultimate way to set attributes. This has the height priority over other options, as it is done in the final stage while rendering the form.

You can define as follow in your template:

{{ form_start(form, {'method': 'POST', 'attr': {'class': 'form-horizontal-ultimate' }}) }}

Answer 2

Add the following to class OrderCardType:

/**
 * @param OptionsResolverInterface $resolver
 */
public function setDefaultOptions(OptionsResolverInterface $resolver)
{
    $resolver->setDefaults(array(
        'attr' => array(
            'class' => 'form-horizontal'
        ),
    ));
}

Answer 3

After Symfony 3, you can use:

/**
 * @param OptionsResolver $resolver
 */
public function configureOptions(OptionsResolver $resolver)
{
    $resolver->setDefaults(array(
        'data_class' => $this->conf['entityClass'],
        'attr' => array('class' => 'form-horizontal')
    ));
}