symfony2 customize form select options

Question

I'm trying to do a simple form to add an activity with a name and a color.

So I want to make a list with some an array of color, for now it is working I have the name of the color.
I can add any attribute to my select tag:

$form = $this->createFormBuilder($myclass)
->add('Colors','choice',array('label'=>'select some colors',
            'multiple'=>true,
            'choices'=>array(1=>'red', 2=>'blue', 3=>'green'),
            'attr'=>array('style'=>'width:300px', 'customattr'=>'customdata')
            ));

The output will be something like this:

<select name="select" style="width: 300px;" multiple="multiple" customattr="customdata">
   <option value="1">red</option>
   <option value="2">blue</option>
   <option value="3">green</option>
</select> 

But how can I add selected="selected" and any attribute I want to my select options ? like this:

<select name="select" style="width: 300px;" multiple="multiple" customattr="customdata">
   <option style="background-color: #F00;" value="1" selected="selected">red</option>
   <option style="background-color: #00F;" value="2" selected="selected">blue</option>
   <option style="background-color: #0F0;" value="3">green</option>
</select> 

My question is: how can I add custom attr for option tag (not for select tag) by symfony FormBuilder.
NOTICE: I don't want to use JavaScript. I want to use symfony2 FormBuilder to customize my select options.

Solution 1

Usually, the default data of a field is determined by the value stored in your object. For example, if

class MyClass
{
    private $Colors = array(1, 2);
}

then the entries "1" and "2" (with the labels "red" and "green") will be displayed as selected by default. You could also store this value in the object before passing it to the form:

$myObject->Colors = array(1, 2);

$form = $this->createFormBuilder($myObject)
    ...

The last possibility is to override the default value stored in the object by passing the "data" option:

$builder->add('Colors', 'choice', array(
    'label' => 'select some colors',
    'multiple' => true,
    'choices' => array(1 => 'red', 2 => 'blue', 3 => 'green'),
    'attr' => array('style' => 'width:300px', 'customattr' => 'customdata'),
    'data' => array(1, 2),
));

Solution 2

use the data option as described here fo selected="selected" : http://symfony.com/doc/current/reference/forms/types/field.html

in ur case could be like this

$form = $this->createFormBuilder($myclass)
->add('Colors','choice',array('label'=>'select some colors',
            'multiple'=>true,
            'choices'=>array(1=>'red', 2=>'blue', 3=>'green'),
            'attr'=>array('style'=>'width:300px', 'customattr'=>'customdata'),
            'data'=> 1
            ));

the new element is data setting the number of the choice array as selected attribute

Solution 3

Every Field in symfony inherits from abstract field type, which has a data option, in which you can pass default option.

By the way, don't pass style stuff, and for custom attrs use data-* attributes.

Solution 4

In order to add your custom attribute on the choice, based on the value of that choice, consider using choice_attr option of the ChoiceType field.

For example if you want to pass json encoded entity to the option, you can use something like this:

'choice_attr' => function($val, $key) {
   return ['data-object' => json_encode($val)];
},

Solution 5

Looks like Symfony 2.7 will add support to make this easier:

https://github.com/symfony/symfony/pull/14050

View more solutions

Comments

[Dariush Jafari]

how can I use data- attributes? how I pass it to the FormBuilder. please explain more.

[moonwave99]

Just rename customattr to data-customattr, to be HTML-compliant.

[Dariush Jafari]

I want to use customattr for my option tag, not for select tag. How can I do this by FormBuilder?

[moonwave99]

You didn't state this in the question - try overriding view [some hints here].