Adding and Removing Items

If allow_add is set to true, then if any unrecognized items are submitted, they'll be added seamlessly to the array of items. This is great in theory, but takes a little bit more effort in practice to get the client-side JavaScript correct.

Following along with the previous example, suppose you start with two emails in the emails data array. In that case, two input fields will be rendered that will look something like this (depending on the name of your form):

1
2

<input type="email" id="form_emails_0" name="form[emails][0]" value="foo@foo.com" />
<input type="email" id="form_emails_1" name="form[emails][1]" value="bar@bar.com" />

To allow your user to add another email, just set allow_add to true and - via JavaScript - render another field with the name form[emails][2] (and so on for more and more fields).

To help make this easier, setting the prototype option to true allows you to render a "template" field, which you can then use in your JavaScript to help you dynamically create these new fields. A rendered prototype field will look like this:

1
2
3
4
5

<input type="email"
    id="form_emails___name__"
    name="form[emails][__name__]"
    value=""
/>

By replacing __name__ with some unique value (e.g. 2), you can build and insert new HTML fields into your form.

Using jQuery, a simple example might look like this. If you're rendering your collection fields all at once (e.g. form_row(form.emails)), then things are even easier because the data-prototype attribute is rendered automatically for you (with a slight difference - see note below) and all you need is the JavaScript:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

{{ form_start(form) }}
    {# ... #}

    {# store the prototype on the data-prototype attribute #}
    <ul id="email-fields-list"
        data-prototype="{{ form_widget(form.emails.vars.prototype)|e }}">
    {% for emailField in form.emails %}
        <li>
            {{ form_errors(emailField) }}
            {{ form_widget(emailField) }}
        </li>
    {% endfor %}
    </ul>

    <a href="#" id="add-another-email">Add another email</a>

    {# ... #}
{{ form_end(form) }}

<script type="text/javascript">
    // keep track of how many email fields have been rendered
    var emailCount = '{{ form.emails|length }}';

    jQuery(document).ready(function() {
        jQuery('#add-another-email').click(function(e) {
            e.preventDefault();

            var emailList = jQuery('#email-fields-list');

            // grab the prototype template
            var newWidget = emailList.attr('data-prototype');
            // replace the "__name__" used in the id and name of the prototype
            // with a number that's unique to your emails
            // end name attribute looks like name="contact[emails][2]"
            newWidget = newWidget.replace(/__name__/g, emailCount);
            emailCount++;

            // create a new list element and add it to the list
            var newLi = jQuery('<li></li>').html(newWidget);
            newLi.appendTo(emailList);
        });
    })
</script>

allow_add

type: boolean default: false

If set to true, then if unrecognized items are submitted to the collection, they will be added as new items. The ending array will contain the existing items as well as the new item that was in the submitted data. See the above example for more details.

The prototype option can be used to help render a prototype item that can be used - with JavaScript - to create new form items dynamically on the client side. For more information, see the above example and How to Embed a Collection of Forms.

allow_delete

type: boolean default: false

If set to true, then if an existing item is not contained in the submitted data, it will be correctly absent from the final array of items. This means that you can implement a "delete" button via JavaScript which simply removes a form element from the DOM. When the user submits the form, its absence from the submitted data will mean that it's removed from the final array.

For more information, see How to Embed a Collection of Forms.

options

type: array default: array()

This is the array that's passed to the form type specified in the type option. For example, if you used the choice type as your type option (e.g. for a collection of drop-down menus), then you'd need to at least pass the choices option to the underlying type:

1
2
3
4
5
6
7
8
9
10
11

$builder->add('favorite_cities', 'collection', array(
    'type'   => 'choice',
    'options'  => array(
        'choices'  => array(
            'nashville' => 'Nashville',
            'paris'     => 'Paris',
            'berlin'    => 'Berlin',
            'london'    => 'London',
        ),
    ),
));

prototype

type: boolean default: true

This option is useful when using the allow_add option. If true (and if allow_add is also true), a special "prototype" attribute will be available so that you can render a "template" example on your page of what a new element should look like. The name attribute given to this element is __name__. This allows you to add a "add another" button via JavaScript which reads the prototype, replaces __name__ with some unique name or number and render it inside your form. When submitted, it will be added to your underlying array due to the allow_add option.

The prototype field can be rendered via the prototype variable in the collection field:

1

{{ form_row(form.emails.vars.prototype) }}

1

<?php echo $view['form']->row($form['emails']->vars['prototype']) ?>

Note that all you really need is the "widget", but depending on how you're rendering your form, having the entire "form row" may be easier for you.

For details on how to actually use this option, see the above example as well as How to Embed a Collection of Forms.

prototype_name

type: string default: __name__

If you have several collections in your form, or worse, nested collections you may want to change the placeholder so that unrelated placeholders are not replaced with the same value.

type

type: string or FormTypeInterface required

This is the field type for each item in this collection (e.g. text, choice, etc). For example, if you have an array of email addresses, you'd use the email type. If you want to embed a collection of some other form, create a new instance of your form type and pass it as this option.

by_reference

type: boolean default: true

In most cases, if you have a name field, then you expect setName() to be called on the underlying object. In some cases, however, setName() may not be called. Setting by_reference ensures that the setter is called in all cases.

To explain this further, here's a simple example:

1
2
3
4
5
6
7
8

$builder = $this->createFormBuilder($article);
$builder
    ->add('title', 'text')
    ->add(
        $builder->create('author', 'form', array('by_reference' => ?))
            ->add('name', 'text')
            ->add('email', 'email')
    )

If by_reference is true, the following takes place behind the scenes when you call submit() (or handleRequest()) on the form:

1
2
3

$article->setTitle('...');
$article->getAuthor()->setName('...');
$article->getAuthor()->setEmail('...');

Notice that setAuthor() is not called. The author is modified by reference.

If you set by_reference to false, submitting looks like this:

1
2
3
4
5

$article->setTitle('...');
$author = $article->getAuthor();
$author->setName('...');
$author->setEmail('...');
$article->setAuthor($author);

So, all that by_reference=false really does is force the framework to call the setter on the parent object.

Similarly, if you're using the collection form type where your underlying collection data is an object (like with Doctrine's ArrayCollection), then by_reference must be set to false if you need the adder and remover (e.g. addAuthor() and removeAuthor()) to be called.

cascade_validation

type: boolean default: false

Set this option to true to force validation on embedded form types. For example, if you have a ProductType with an embedded CategoryType, setting cascade_validation to true on ProductType will cause the data from CategoryType to also be validated.

empty_data

type: mixed

DEFAULT_PLACEHOLDER

This option determines what value the field will return when the submitted value is empty.

But you can customize this to your needs. For example, if you want the gender choice field to be explicitly set to null when no value is selected, you can do it like this:

1
2
3
4
5
6
7
8
9

$builder->add('gender', 'choice', array(
    'choices' => array(
        'm' => 'Male',
        'f' => 'Female'
    ),
    'required'    => false,
    'empty_value' => 'Choose your gender',
    'empty_data'  => null
));

The default value is array() (empty array).

empty_data

type: mixed

DEFAULT_PLACEHOLDER

This option determines what value the field will return when the submitted value is empty.

But you can customize this to your needs. For example, if you want the gender choice field to be explicitly set to null when no value is selected, you can do it like this:

1
2
3
4
5
6
7
8
9

$builder->add('gender', 'choice', array(
    'choices' => array(
        'm' => 'Male',
        'f' => 'Female'
    ),
    'required'    => false,
    'empty_value' => 'Choose your gender',
    'empty_data'  => null
));

error_bubbling

type: boolean default: true

If true, any errors for this field will be passed to the parent field or form. For example, if set to true on a normal field, any errors for that field will be attached to the main form, not to the specific field.

error_mapping

type: array default: array()

This option allows you to modify the target of a validation error.

Imagine you have a custom method named matchingCityAndZipCode that validates whether the city and zip code match. Unfortunately, there is no "matchingCityAndZipCode" field in your form, so all that Symfony can do is display the error on top of the form.

With customized error mapping, you can do better: map the error to the city field so that it displays above it:

1
2
3
4
5
6
7
8

public function setDefaultOptions(OptionsResolverInterface $resolver)
{
    $resolver->setDefaults(array(
        'error_mapping' => array(
            'matchingCityAndZipCode' => 'city',
        ),
    ));
}

Here are the rules for the left and the right side of the mapping:

• The left side contains property paths;
• If the violation is generated on a property or method of a class, its path is simply propertyName;
• If the violation is generated on an entry of an array or ArrayAccess object, the property path is [indexName];
• You can construct nested property paths by concatenating them, separating properties by dots. For example: addresses[work].matchingCityAndZipCode;
• The right side contains simply the names of fields in the form.

By default, errors for any property that is not mapped will bubble up to the parent form. You can use the dot (.) on the left side to map errors of all unmapped properties to a particular field. For instance, to map all these errors to the city field, use:

1
2
3
4
5

$resolver->setDefaults(array(
    'error_mapping' => array(
        '.' => 'city',
    ),
));

label

type: string default: The label is "guessed" from the field name

Sets the label that will be used when rendering the field. Setting to false will suppress the label. The label can also be directly set inside the template:

1

{{ form_label(form.name, 'Your name') }}

1
2
3
4

echo $view['form']->label(
    $form['name'],
    'Your name'
);

label_attr

type: array default: array()

Sets the HTML attributes for the <label> element, which will be used when rendering the label for the field. It's an associative array with HTML attribute as a key. This attributes can also be directly set inside the template:

1
2
3

{{ form_label(form.name, 'Your name', {
       'label_attr': {'class': 'CUSTOM_LABEL_CLASS'}
}) }}

1
2
3
4
5

echo $view['form']->label(
    $form['name'],
    'Your name',
    array('label_attr' => array('class' => 'CUSTOM_LABEL_CLASS'))
);

mapped

type: boolean default: true

If you wish the field to be ignored when reading or writing to the object, you can set the mapped option to false.

required

type: boolean default: true

If true, an HTML5 required attribute will be rendered. The corresponding label will also render with a required class.

This is superficial and independent from validation. At best, if you let Symfony guess your field type, then the value of this option will be guessed from your validation information.