Collection of form embedded is showing the whole form insetead of a single field

Question

I'm following the official documentation example but I can't make it to work properly.

Summarizing, I have material and items_budget table. Both of them are related as oneToMany and manyToOne, by the id and material fields:

Material.orm.yml:

oneToMany:
    itemsBudget:
        targetEntity: ItemsBudget
        mappedBy: material

ItemsBudget.orm.yml:

material:
    targetEntity: Material
    inversedBy: itemsBudget
    joinColumn:
        name: material
        referencedColumnName: id

Here, the ItemsBudgetType where I set the material field as a collection:

$builder->add('budget', 'entity', array(
            'class' => 'PanelBundle:Budget',
            'attr' => array(
                'class' => 'form-control',
            ),
        ))
        ->add('material', 'collection', array(
            'type' => new MaterialType(),
            'allow_add' => true
        ))
        ->add('quantity', 'number', array(
            'attr' => array(
                'class' => 'form-control',
            ),
        ))
        ->add('price', 'money', array(
            'attr' => array(
                'class' => 'form-control',
            ),
        ));

Just for information, the MaterialType:

$builder->add('name', 'text', array(
            'attr' => array(
                'class' => 'form-control',
            ),
        ))
        ->add('description', 'text', array(
            'attr' => array(
                'class' => 'form-control',
            ),
        ))
        ->add('current_quantity', 'text', array(
            'attr' => array(
                'class' => 'form-control',
                'required' => false
            ),
        ))
        ->add('price', 'money', array(
            'attr' => array(
                'class' => 'form-control',
            ),
        ));

Here the index.html.twig of my ItemsBudget view:

<strong>Materiais</strong>
<div class="form-group">
    <ul class="materials" data-prototype="{{ form_widget(form.material.vars.prototype)|e }}">
        {% for material in form.material %}
            <li>{{ form_widget(form.material.vars.prototype.name) }}</li>
        {% endfor %}
    </ul>
</div>

In the view, I have tried also as it is in the example: {{ form_row(material.name) }}, but it still shows the whole Material form.

And where I'm calling them, in the ItemsBudgetController:

public function addAction(Request $request)
{
    $form = $this->createForm(new ItemsBudgetType(), new ItemsBudget());
    $manager = $this->getDoctrine()->getManager();

    if ($request->getMethod() == 'POST') {
        $form->handleRequest($request);

        if ($form->isValid()) {
            $ItemsBudgetEntity = $form->getData();
            $manager->persist($ItemsBudgetEntity);
            $manager->flush();

            $BudgetEntity = $form->get('budget')->getData();
            $BudgetEntity->addItemsBudget($ItemsBudgetEntity);

            $manager->persist($BudgetEntity);
            $manager->flush();

            $this->addFlash('success', 'Materiais para o orçamento adicionados');

            return $this->redirect($this->generateUrl('panel_budgets'));
        }
    }

    return $this->render('PanelBundle:ItemsBudget:index.html.twig', array(
        'form' => $form->createView(),
        'budgets' => $manager->getRepository('PanelBundle:Budget')->findAll()
    ));
}

The JavaScript is the same from the example too:

function addMaterial($collectionHolder, $newLinkLi) {
    var prototype = $collectionHolder.data('prototype');
    var index = $collectionHolder.data('index');
    var newForm = prototype.replace(/__name__/g, index);

    $collectionHolder.data('index', index + 1);

    var $newFormLi = $('<li></li>').append(newForm);
    $newLinkLi.before($newFormLi);
}

var $collectionHolder;
var addMaterialLink = $('<a href="#" class="add_material_link">Mais</a>');
var $newLinkLi = $('<li></li>').append(addMaterialLink);

jQuery(document).ready(function () {
    $collectionHolder = $('ul.materials');
    $collectionHolder.append($newLinkLi);
    $collectionHolder.data('index', $collectionHolder.find(':input').length);

    addMaterialLink.on('click', function (e) {
        e.preventDefault();
        addMaterial($collectionHolder, $newLinkLi);
    });
});

This is the issue: instead of showing only the name field from Material form, it is showing the whole form every time I click the "Mais". Am I missing something?

Answer 1

The javascript takes the content of the data-prototype attribute and appends it to the html of the form. The attribute in your template contains {{ form_widget(form.material.vars.prototype)|e }} which is the html prototype of the form.

Try:

<ul class="materials" data-prototype="{{ form_widget(form.material.vars.prototype.name) }}">