我一直在研究 embedding 上的 Symfony 3 教程表单的集合，我想将这个想法扩展到额外的嵌套级别。我环顾四周，有 Symfony 2 的部分答案，但没有全面的答案(3 也没有)。

如果我们采用教程 Task 有很多 Tag 示例，我将如何编写它以便它扩展到:Task 有很多 Tag 有很多SubTag？

到目前为止，我想我理解了 Form 类:

任务:

class TaskType extends AbstractType
{
    public function buildForm(FormBuilderInterface $builder, array $options)
    {
        $builder->add('description');

        $builder->add('tags', CollectionType::class, array(
            'entry_type' => TagType::class,
            'allow_add' => true,
            'by_reference' => false,
            'allow_delete' => true
        ));
    }

    public function configureOptions(OptionsResolver $resolver)
    {
        $resolver->setDefaults(array(
            'data_class' => 'AppBundle\Entity\Task',
        ));
    }
}

标签:

class TagType extends AbstractType
    {
        public function buildForm(FormBuilderInterface $builder, array $options)
        {
            $builder->add('name');

            $builder->add('sub_tags', CollectionType::class, array(
                'entry_type' => SubTagType::class,
                'allow_add' => true,
                'by_reference' => false,
                'allow_delete' => true
            ));
        }

        public function configureOptions(OptionsResolver $resolver)
        {
            $resolver->setDefaults(array(
                'data_class' => 'AppBundle\Entity\Tag',
            ));
        }
    }

子标签:

class SubTagType extends AbstractType
    {
        public function buildForm(FormBuilderInterface $builder, array $options)
        {
            $builder->add('name');
        }

        public function configureOptions(OptionsResolver $resolver)
        {
            $resolver->setDefaults(array(
                'data_class' => 'AppBundle\Entity\SubTag',
            ));
        }
    }

以及基本的 Twig 类:

{{ form_start(form) }}
    {# render the task's only field: description #}
    {{ form_row(form.description) }}

    <h3>Tags</h3>
    <ul class="tags">
        {# iterate over each existing tag and render its only field: name #}
        {% for tag in form.tags %}
            <li>{{ form_row(tag.name) }}</li>
            {% for sub_tag in tag.sub_tags %}
                <li>{{ form_row(sub_tag.name) }}</li>
            {% endfor %}
        {% endfor %}
    </ul>
{{ form_end(form) }}

但此时我不确定原型(prototype)和 javascript 将如何工作。有人可以解释我将如何采取下一步行动吗？这是正确的方法吗？

我的第一个想法是，如果我们正在做额外的关卡，那么将 JS 概括为任意数量的关卡可能是明智的，因为本教程使用的 JS 只能在一个关卡上工作。

我能找到的最接近的工作代码是这个堆栈溢出答案 here .但是，它似乎并没有像描述的那样工作，而且我无法准确找出问题所在。

最佳答案

它与常规的嵌入式表单集合没有任何不同。

但是，如果您想避免默认 __NAME__ 原型(prototype)与父表单的原型(prototype)字符串发生冲突，您应该为 TagType 和SubTag 类型。

来自 the Symfony Docs entry on CollectionType :

prototype_name

• type: string default: name
• If you have several collections in your form, or worse, nested collections you may want to change the placeholder so that unrelated placeholders are not replaced with the same value.

如果您想使用 javascript 抽象您的克隆操作，这将非常有用，如 this article 中的那些操作(粘贴在下面)，顺便说一下，它似乎以 symfony3 为目标!

例如，您可能想要包含您传递给 prototype_name 的相同值，作为集合持有者 html 上的一个属性，以便您可以在执行 replace 时动态访问它 在 data-prototype html 上。

var $collectionHolder;

// setup an "add a tag" link
var $addTagLink = $('<a href="#" class="add_tag_link">Add a tag</a>');
var $newLinkLi = $('<li></li>').append($addTagLink);

jQuery(document).ready(function() {
// Get the ul that holds the collection of tags
$collectionHolder = $('ul.tags');

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

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

    // increase the index with one for the next item
    $collectionHolder.data('index', index + 1);

    // Display the form in the page in an li, before the "Add a tag" link li
    var $newFormLi = $('<li></li>').append(newForm);
    $newLinkLi.before($newFormLi);
}

关于javascript - Symfony 3 多层嵌套表单，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40138645/