Symfony2 collection always empty - forms

Question

I have an issue that I haven't been able to solve. I have 2 entities:
<?php
namespace ...\Entity;
// ...
/**
* Pregunta
*
* #ORM\Table(name="pregunta", indexes={#ORM\Index(name="fk_respuesta_tipo_respuesta1_idx", columns={"tipo_respuesta_id"}))})
* #ORM\Entity
*/
class Pregunta {
/**
* #var integer
*
* #ORM\Column(name="id", type="integer")
* #ORM\Id
* #ORM\GeneratedValue(strategy="IDENTITY")
*/
private $id;
/**
* #var \Doctrine\Common\Collections\Collection
*
* #ORM\ManyToMany(targetEntity="...\Entity\Respuesta", mappedBy="pregunta")
*/
private $respuesta;
public function __construct() {
$this->tipoPrueba = new \Doctrine\Common\Collections\ArrayCollection();
$this->respuesta = new \Doctrine\Common\Collections\ArrayCollection();
}
/**
* Add respuesta
*
* #param ...\Entity\Respuesta $respuesta
* #return Pregunta
*/
public function addRespuesta(...\Entity\Respuesta $respuesta) {
$this->respuesta[] = $respuesta;
return $this;
}
/**
* Remove respuesta
*
* #param ...\Entity\Respuesta $respuesta
*/
public function removeRespuesta(...\Entity\Respuesta $respuesta) {
$this->respuesta->removeElement($respuesta);
}
/**
* Get respuesta
*
* #return \Doctrine\Common\Collections\Collection
*/
public function getRespuesta() {
return $this->respuesta;
}
function setRespuesta(\Doctrine\Common\Collections\Collection $respuesta) {
$this->respuesta = $respuesta;
}
}
Then I have the Respuesta entity:
<?php
class Respuesta {
/**
* #var integer
*
* #ORM\Column(name="id", type="integer")
* #ORM\Id
* #ORM\GeneratedValue(strategy="IDENTITY")
*/
private $id;
/**
* #var string
*
* #ORM\Column(name="texto_respuesta", type="text", nullable=false)
*/
private $textoRespuesta;
// ...
I have a PreguntaType which has its fields and a collection of RespuestaType:
/**
* #param FormBuilderInterface $builder
* #param array $options
*/
public function buildForm(FormBuilderInterface $builder, array $options) {
$builder
->add('titulo', 'textarea', array("label" => "Enunciado: ", "required" => true, "attr" => array('class' => 'form-control')))
->add('numeroPagina', 'integer', array("label" => "Página: ", "required" => true, "attr" => array('class' => 'form-control')))
->add('areaConocimiento', 'entity', array('class' => 'UciBaseDatosBundle:AreaConocimiento', 'required' => false, 'attr' => array('style' => 'width: 100%')))
->add('trianguloTalento', 'entity', array('class' => 'UciBaseDatosBundle:TrianguloTalento', 'required' => false, 'attr' => array('style' => 'width: 100%')))
->add('capitulo', 'entity', array('class' => 'UciBaseDatosBundle:Capitulo', 'required' => false, 'attr' => array('style' => 'width: 100%')))
->add('grupoProcesos', 'entity', array('class' => 'UciBaseDatosBundle:GrupoProcesos', 'required' => false, 'attr' => array('style' => 'width: 100%')))
->add('tipoPrueba', 'entity', array('class' => 'UciBaseDatosBundle:TipoPrueba', 'expanded' => true, 'multiple' => true, 'required' => false, 'attr' => array('style' => 'width: 100%')))
->add('libro', 'entity', array('class' => 'UciBaseDatosBundle:Libro', 'required' => false, 'attr' => array('style' => 'width: 100%')))
->add('respuesta', 'collection', array(
'type' => new RespuestaType(),
'prototype' => true,
'allow_add' => true,
'by_reference' => false,
'allow_delete' => true,
'label' => ' '
));
}
/**
* #param OptionsResolverInterface $resolver
*/
public function setDefaultOptions(OptionsResolverInterface $resolver) {
$resolver->setDefaults(array(
'data_class' => 'Uci\Bundle\BaseDatosBundle\Entity\Pregunta'
));
}
However, when I debug my form submission, if i set my collection to 'required' => true, it throws this error An invalid form control with name='...[respuesta][Respuesta0][RespuestaField]' is not focusable. On the other hand, If I set it to 'required' => false, my collections' fields are always empty.
This is my TWIG file:
<form action="{{ path('uci_administrador_registrarPregunta', { 'idTipoRespuesta': tipoRespuesta.id }) }}" name="formulario" method="POST" enctype="multipart/form-data">
<h3 class="thin text-center">Registrar una nueva pregunta {{ tipoRespuesta.nombre }}</h3>
<p class="text-center text-muted">{{ tipoRespuesta.explicacion }}</p>
<hr>
{% if error %}
<div style="color:red">{{ error }}</div>
{% endif %}
<div class="row top-margin">
<div class="cols-xs-12 col-sm-10 col-md-8 col-lg-8">
{{ form_row(form.titulo) }}
</div>
</div>
<div class="row top-margin">
<div class="cols-xs-12 col-sm-10 col-md-8 col-lg-8">
{{ form_row(form.numeroPagina) }}
</div>
</div>
<div class="row top-margin">
<div class="cols-xs-12 col-sm-10 col-md-8 col-lg-8">
{{ form_row(form.areaConocimiento) }}
</div>
</div>
<div class="row top-margin">
<div class="cols-xs-12 col-sm-10 col-md-8 col-lg-8">
{{ form_row(form.capitulo) }}
</div>
</div>
<div class="row top-margin">
<div class="cols-xs-12 col-sm-10 col-md-8 col-lg-8">
{{ form_row(form.grupoProcesos) }}
</div>
</div>
<div class="row top-margin">
<div class="cols-xs-12 col-sm-10 col-md-8 col-lg-8">
{{ form_row(form.trianguloTalento) }}
</div>
</div>
<div class="row top-margin">
<div class="cols-xs-12 col-sm-10 col-md-8 col-lg-8">
{{ form_row(form.tipoPrueba) }}
</div>
</div>
<div class="row top-margin">
<div class="cols-xs-12 col-sm-10 col-md-8 col-lg-8">
{{ form_row(form.libro) }}
</div>
</div>
<br>
<hr>
<h3>Respuestas</h3><br>
<div class="respuestas" data-prototype="{{ form_widget(form.respuesta.vars.prototype)|e }}">
{# iterate over each existing tag and render its only field: name #}
{% for respuesta in form.respuesta %}
<div class="row top-margin">
<div class="cols-xs-12 col-sm-10 col-md-8 col-lg-8">
{{ form_row(respuesta.correcta) }}
</div>
</div>
{% endfor %}
</div>
<br><br>
<div class="row">
<div class="col-lg-8">
</div>
<div class="col-lg-4 text-right">
<button class="btn btn-action" type="submit">Registrar</button>
</div>
</div>
{{ form_rest(form) }}
</form>
I use some javascript to add my collection forms:
var $collectionHolder;
// setup an "add a tag" link
var $addTagLink = $('Añadir respuesta');
var $newLinkLi = $('<div></div>').append($addTagLink);
function addTagForm($collectionHolder, $newLinkLi) {
// Get the data-prototype explained earlier
var prototype = $collectionHolder.data('prototype');
// get the new index
var index = $collectionHolder.data('index');
// Replace '__name__' in the prototype's HTML to
// instead be a number based on how many items we have
var newForm = prototype.replace(/__name__/g, 'Respuesta' + index);
// increase the index with one for the next item
$collectionHolder.data('index', $collectionHolder.find(':input').length);
// Display the form in the page in an li, before the "Add a tag" link li
var $newFormLi = $('<div style="background-color:#F6F6F6; border-radius:10px;padding: 25px;border: 5px solid #003c70;margin: 5px;"></div><br>').append(newForm);
$newLinkLi.before($newFormLi);
}
document.ready = function () {
// Get the ul that holds the collection of tags
$collectionHolder = $('div.respuestas');
// add the "add a tag" anchor and li to the tags ul
$collectionHolder.append($newLinkLi);
// count the current form inputs we have (e.g. 2), use that as the new
// index when inserting a new item (e.g. 2)
$collectionHolder.data('index', $collectionHolder.find(':input').length);
$addTagLink.on('click', function (e) {
// prevent the link from creating a "#" on the URL
e.preventDefault();
// add a new tag form (see next code block)
addTagForm($collectionHolder, $newLinkLi);
});
// ...
}
I would really appreciate any help.
Thanks.

Answer 1

My problem was in my javascript. I don´t know why my previous code didn't work but I changed and it worked. My javascript is the following:
var collectionHolder = $('#respuestas');
var prototype = collectionHolder.attr('data-prototype');
var form = prototype.replace(/__name__/g, collectionHolder.children().length); //importante
var removeFormA = $('Borrar');
var newLi = $('<li></li>');
newLi.append(form);
newLi.append(removeFormA);
collectionHolder.append(newLi);
And this is part of my TWIG file:
<ul id="respuestas" data-prototype="{{ form_widget(form.respuesta.vars.prototype)|e }}">
{% for respuesta in form.respuesta %}
<li> {{ form_row(respuesta) }}</li>
{% endfor %}
</ul>
I hope it helps someone else.
Regards.

Answer 2

Are you trying to hide some fields in your form ? It looks like some fields are required but not actually displayed in the page, which prevents the browser from validating the form. Refer to that answer : https://stackoverflow.com/a/28340579/4114297
I wonder why you're only rendering respuesta.correcta in the loop. You might want to render the while respuesta item :
<div class="respuestas" data-prototype="{{ form_widget(form.respuesta.vars.prototype)|e }}">
{# iterate over each existing tag and render its only field: name #}
{% for respuesta in form.respuesta %}
<div class="row top-margin">
<div class="cols-xs-12 col-sm-10 col-md-8 col-lg-8">
{{ form_row(respuesta) }} {# <- Here #}
</div>
</div>
{% endfor %}
</div>
If you need some fields to be hidden and/or pre-filled, you could do that RespuestaType