Javascript symfony 2中的嵌套表单集合

我有一个表单，其中包含一个集合类型字段，在集合类型字段中还有一个集合类型字段。我必须在细枝中添加嵌套的表单字段，但我无法填充表单字段，也无法找到一个示例来说明如何使用JQuery填充嵌套字段

First form class :

class SurveyType extends AbstractType
   {
    public function buildForm(FormBuilderInterface $builder, array $options)
    {
       $builder->add(
                'questiongroups',
                CollectionType::class,
                [
                    'entry_type' => QuestionGroupType::class,
                    'allow_add' => true,
                    'allow_delete' => true,
                    'entry_options' => [
                         'submitOption' => $options['submitOption']
                    ]
                ]
            );
    }

Second form class which have another collection type field :

class QuestionGroupType extends AbstractType
   {
    public function buildForm(FormBuilderInterface $builder, array $options)
    {
       $builder->add(
                'questions',
                CollectionType::class,
                [
                    'entry_type' => QuestionType::class,
                    'allow_add' => true,
                    'allow_delete' => true,
                    'entry_options' => [
                         'submitOption' => $options['submitOption']
                    ],
                    'prototype_name' => '__que__'
                ]
            );
    }

On twig I its like this:


                           <ul id="questiongroups-field-list" data-prototype-question="{{ form_widget(form.questiongroups.vars.prototype.children['questions'].vars.prototype)|e }}"
                        data-prototype="{{ form_widget(form.questiongroups.vars.prototype)|e}}"
                        data-widget-tags="{{'<li></li>'|e}}">

第一级：
类SurveyType扩展了AbstractType
{
公共函数buildForm（FormBuilderInterface$builder、array$options）
{
$builder->add(
“问题组”，
CollectionType:：类，
[
“条目类型”=>QuestionGroupType:：类，
“允许添加”=>true，
“允许删除”=>true，
“输入选项”=>[
'submitOption'=>$options['submitOption']
]
]
);
}
具有另一个集合类型字段的第二个表单类：
类QuestionGroupType扩展了AbstractType
{
公共函数buildForm（FormBuilderInterface$builder、array$options）
{
$builder->add(
“问题”，
CollectionType:：类，
[
“条目类型”=>QuestionType:：类，
“允许添加”=>true，
“允许删除”=>true，
“输入选项”=>[
'submitOption'=>$options['submitOption']
],
“原型名称”=>“\uuuuuque\uuuuuuuu”
]
);
}
在我的小树枝上，它是这样的：

我的Jquery用于填充字段：

$(document).on('click', '.add-another-collection-widget', function(e){
                var list = $($(this).attr('data-list'));
                var counter = list.data('widget-counter') | list.children().length;

                var newWidget = list.attr('data-prototype');
                newWidget = newWidget.replace(/__name__/g, counter);
                console.log(newWidget);
                counter++;

                list.data('widget-counter', counter);

                var newElem = jQuery(list.attr('data-widget-tags')).html(newWidget);
                newElem.appendTo(list);
                addTagFormDeleteLink(newElem);
            });

            function addTagFormDeleteLink($tagFormLi) {
                var $addQuestionButton = $('<button class="button" type="button">Add Question</button>');
                var $removeFormButton = $('<button class="alert button" type="button">Delete Group</button>');
                $tagFormLi.append($addQuestionButton);
                $tagFormLi.append($removeFormButton);
                $removeFormButton.on('click', function(e) {
                    // remove the li for the tag form
                    $tagFormLi.remove();
                });

                $addQuestionButton.on('click', function(){
                    var list = $('#questiongroups-field-list');
                    var counter = list.data('widget-counter') | list.children().length;
                    var newWidget = list.attr('data-prototype-question');
                    newWidget = newWidget.replace(/__name__/g, counter);
                    counter++;

                    list.data('widget-counter', counter);
                    $tagFormLi.append(newWidget);
                });
            }

$（文档）。在（'单击'，'上。添加另一个集合小部件'，函数（e）{
var list=$（$（this.attr（'data-list'））；
var counter=list.data（'widget-counter'）| list.children（）.length；
var newWidget=list.attr（'data-prototype'）；
newWidget=newWidget.replace（/\u\u name\u\u/g，计数器）；
log（newWidget）；
计数器++；
列表数据（'widget-counter'，计数器）；
var newElem=jQuery（list.attr（'data-widget-tags'））.html（newWidget）；
附录（列表）；
addTagFormDeleteLink（newElem）；
});
函数addTagFormDeleteLink（$tagFormLi）{
变量$addQuestionButton=$（'addQuestionButton'）；
var$removeFormButton=$（“删除组”）；
$tagFormLi.append（$addQuestionButton）；
$tagFormLi.append（$removeFormButton）；
$removeFormButton.on（'click'，函数（e）{
//删除标记窗体的li
$tagFormLi.remove（）；
});
$addQuestionButton.on（'click'，function（）{
变量列表=$（“#问题组字段列表”）；
var counter=list.data（'widget-counter'）| list.children（）.length；
var newWidget=list.attr（'data-prototype-question'）；
newWidget=newWidget.replace（/\u\u name\u\u/g，计数器）；
计数器++；
列表数据（'widget-counter'，计数器）；
$tagFormLi.append（newWidget）；
});
}

在仔细阅读原型变量之后。这就是我如何将单表单集合的代码修改为嵌套表单集合： Prototye字段更改：

<ul id="questiongroups-field-list" data-prototype-question = "{{ form_widget(form.questiongroups.vars.prototype.children['questions'].vars.prototype)|e }}"
                    data-prototype="{{ form_widget(form.questiongroups.vars.prototype)|e}}"
                    data-widget-tags="{{'<li></li>'|e}}" data-tag-list = "{{ '<ul class="question-list"></ul>' |e}}">

以下是Jquery代码：

$(document).on('click', '.add-questiongroup[data-target]', function(event) {
            var collectionHolder = $($(this).attr('data-target'));

            if (!collectionHolder.attr('data-counter')) {
                collectionHolder.attr('data-counter', collectionHolder.children().length);
            }

            var prototype = collectionHolder.attr('data-prototype');
            var form = prototype.replace(/__name__/g, collectionHolder.attr('data-counter'));

            newWidget = $(collectionHolder.attr('data-widget-tags')).html(form);
            newWidget.append(collectionHolder.attr('data-tag-list'));

            collectionHolder.attr('data-counter', Number(collectionHolder.attr('data-counter')) + 1);
            collectionHolder.append(newWidget);

            var questionPrototype = collectionHolder.attr('data-prototype-question');
            var counter = collectionHolder.attr('data-counter');

            newWidget.attr('data-counter', counter);
            addTagFormDeleteLink(newWidget);
            $('.option-min, .option-max').parent().hide();
            event && event.preventDefault();
        });

        function addTagFormDeleteLink(newWidget) {
            $removeFormButton = $('<button type="button" class="alert button">Delete Group</button>');
            $addQuestionButton = $('<button type="button" class="button">Add Question</button><br>');
            $removeQuestion = $('<button type="button" class="alert button deleteQuebtn">Delete Question</button>');
            newWidget.append($addQuestionButton);
            newWidget.append($removeFormButton);

            $removeFormButton.on('click', function(e) {
                newWidget.remove();
            });

            $addQuestionButton.on('click', function(e){
                $holder = $('#questiongroups-field-list');
                $question = $holder.attr('data-prototype-question');
                $questionHolder = newWidget.find('ul');

                var counter = $questionHolder.children().length;
                var form = $question.replace(/__name__/g, $holder.attr('data-counter')-1).replace(/__que__/g, counter++);
                var newQuestion = $($holder.attr('data-widget-tags')).html(form);

                $questionHolder.append(newQuestion);

            });
        }

$（文档）。在（'单击'，'添加问题组[数据目标]），函数（事件）{
var collectionHolder=$（$（this.attr（'data-target'））；
if（！collectionHolder.attr（'data-counter'））{
collectionHolder.attr（'data-counter'，collectionHolder.children（）.length）；
}
var-prototype=collectionHolder.attr（'data-prototype'）；
var form=prototype.replace（/__name__;g，collectionHolder.attr（'data-counter'））；
newWidget=$（collectionHolder.attr（'data-widget-tags'））.html（表单）；
append（collectionHolder.attr（'data-tag-list'）；
collectionHolder.attr（'data-counter'），编号（collectionHolder.attr（'data-counter'））+1；
collectionHolder.append（newWidget）；
var questionPrototype=collectionHolder.attr（'data-prototype-question'）；
var counter=collectionHolder.attr（'data-counter'）；
newWidget.attr（'data-counter'，counter）；
addTagFormDeleteLink（newWidget）；
$（'.option-min、.option-max'）.parent（）.hide（）；
event&&event.preventDefault（）；
});
函数addTagFormDeleteLink（newWidget）{
$removeFormButton=$（'Delete Group'）；
$addQuestionButton=$（“添加问题
”）；
$removeQuestion=$（'Delete Question'）；
追加（$addQuestionButton）；
append（$removeFormButton）；
$removeFormButton.on（'click'，函数（e）{
newWidget.remove（）；
});
$addQuestionButton.on（'click'，函数（e）{
$holder=$（“#问题组字段列表”）；
$question=$holder.attr（'data-prototype-question'）；
/**
 * @Route("edit/break-evens/_form", name="admin_ride_edit_ride_break_evens_subform", options={"expose"=true}, methods={"GET"})
 */
public function _formAction()
{
    $entity = new Ride();
    $entity->addBreakEven(new BreakEven());

    $form = $this->createForm(
        RideType::class,
        $entity
    );

    $form = $form->get('breakEvens')[0];

    return $this->render('AdminBundle:Ride:_edit.html.twig', [
        'form' => $form->createView(),
    ]);
}