Question

我有一个包含收集类型字段的表单，在收集类型字段中还有一个收集类型字段。我必须在树枝中添加嵌套的表单字段，但是我无法填充表单字段，也无法找到显示该示例的示例，如何使用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}}">

我的用于填充字段的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);
                });
            }

Answer 1

仔细查看原型变量后。这就是我将“单一表单”集合的代码修改为嵌套表单集合的方式：原型字段更改：

<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);

            });
        }

Answer 2

在这样的情况下，

表格很痛苦

我通常会解决，并在此情况下以另一种方式为您提出建议：

每一个显示集合中单个项目的html都通过AJAX加载（我称之为“子表单”）
因此，当我需要在表单中添加集合的项目时，我会这样做：

/**
 * @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(),
    ]);
}

其中：

Ride与BreakEven是1：n，也就是说breakEvens是RideType形式的集合

所以，当我想添加一个项目时：

我叫上面的动作
我创建一个“完整”表单，添加感兴趣的收藏集的一个项目（new BreakEven()）
我仅为集合的第一个对象创建视图
然后在加载时使用js更改表单字段的数量

当然，如果您有馆藏，事情会变得更加困难，但是您可以考虑这个概念

Symfony 2中的嵌套表单集合

2 个答案: