I have a data structure where a Topic has many Questions (one to many), and a Question has many Answers (one to many).
I have set up Questions as an embedded collection in the Topic form, and I have it all working 100% thanks to the cookbook entry.
When I try to develop this to embed a collection of Answer forms in the Question form then I run in to a problem.
The data-prototype attribute that contains the prototype form at the top level has the full depth of form in it, so includes the prototype for both Question and Answer. But it uses the same placeholder __name__
for each level.
<div id="topic_questions___name__">
<div class="control-group">
<label for="topic_questions___name___questionText" class="control-label">question</label>
<div class="form-row-errors"></div>
<div class="controls">
<textarea id="topic_questions___name___questionText" name="topic[questions][__name__][questionText]" required="required" class="input-block-level"></textarea>
</div>
</div>
<div class="control-group">
<label class="control-label">answers</label>
<div class="controls">
<div id="topic_questions___name___answers" data-prototype="<div class="control-group"><label class="control-label">__name__label__</label><div class="controls"><div id="topic_questions___name___answers___name__"><div class="control-group"><label for="topic_questions___name___answers___name___answerText" class="control-label">option</label><div class="form-row-errors"></div><div class="controls"><input type="text" id="topic_questions___name___answers___name___answerText" name="topic[questions][__name__][answers][__name__][answerText]" required="required" maxlength="255" /></div></div><input type="hidden" id="topic_questions___name___answers___name___sortOrder" name="topic[questions][__name__][answers][__name__][sortOrder]" /></div></div></div>"></div>
</div>
</div>
You can see the really long line at the bottom, which I guess is the prototype-prototype (!) for the answer form. There is no way that I can see to only replace the question related [__name__]
placeholders and not the Answer related ones.
Doing the normal
var newForm = prototype.replace(/__name__/g, collectionHolder.children().length);
when creating a real instance of a Question form of course replaces all instances of __name__
with the same value, so when the data-prototype is created for the Answer form, it has already had all the placeholders replaced.
This is what the data-prototype looks like for the Answer form, when I have clicked to add a real Question form
<div class="control-group">
<label class="control-label">1label__</label>
<div class="controls">
<div id="topic_questions_1_answers_1">
<div class="control-group">
<label for="topic_questions_1_answers_1_answerText" class="control-label">option</label>
<div class="form-row-errors"></div>
<div class="controls">
<input type="text" id="topic_questions_1_answers_1_answerText" name="topic[questions][1][answers][1][answerText]" required="required" maxlength="255" />
</div>
</div>
</div>
</div>
As you can see, the __name__
placeholder doesnt feature at all - it was already replaced with the count for the Question form when the question form was created.
Is it possible to achieve this kind of multiple depth embedded collection with the mechanism Symfony provides?
As long as it tries to use the same placeholder for each 'level' then I can not see how.
Are you using at least Symfony 2.1? If so, you can change the __name__
label with the property prototype_name
:
http://symfony.com/doc/master/reference/forms/types/collection.html#prototype-name
In your form:
->add('answers', 'collection', array(
'type' => new AnswerType(),
'allow_add' => true,
'prototype_name' => 'another_name'
))
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With