如何在空集合表单中动态添加输入字段


How to add an entry field dynamically in an empty collection form?

我的表单遇到问题,我需要帮助...

我想创建一个可以保留广告的表单。我的问题来自我的多对多项目"图像"。我通过"图像"表单获得的新div 如下所示:

<div><label class="required">Images</label><div id="annonce_rent_images" data-prototype="<div><label class=&quot;required&quot;>__name__label__</label><div id=&quot;annonce_rent_images___name__&quot;><div><label for=&quot;annonce_rent_images___name___url&quot; class=&quot;required&quot;>Url</label><input type=&quot;url&quot; id=&quot;annonce_rent_images___name___url&quot; name=&quot;annonce_rent[images][__name__][url]&quot; required=&quot;required&quot; /></div><div><label for=&quot;annonce_rent_images___name___alt&quot; class=&quot;required&quot;>Alt</label><input type=&quot;text&quot; id=&quot;annonce_rent_images___name___alt&quot; name=&quot;annonce_rent[images][__name__][alt]&quot; required=&quot;required&quot; /></div></div></div>"></div></div>

字段"url"和"alt"被卡在sub-div的数据原型属性中我应该如何解决这个问题?

这是我的代码的一些示例,如果您需要完整的文件,我可以发布它们。

表单生成器 :

$builder
        ->add('name', TextType::class)
        ->add('description', TextType::class)
        ->add('price', TextType::class)
        ->add('location', TextType::class)
        ->add('zipcode', TextType::class)
        ->add('images', CollectionType::class, array(
            'entry_type'         => 'LAMainBundle'Form'ImageType',
            'allow_add'    => true,
            'allow_delete' => true
        ))
        ->add('save', SubmitType::class, array('label' => 'Save'))
    ;

图像生成器 :

$builder
        ->add('url',    UrlType::class)
        ->add('alt',    TextType::class)
    ;

控制器添加RentAction :

$annonce = new AnnonceRent();
    $form = $this->createForm('LAMainBundle'Form'AnnonceRentType');
    return $this->render('LAMainBundle:Admin:addrent.html.twig', array(
        'form' => $form->createView(),
    ));

你需要一些javascript来添加字段,这里有一种使用jQuery轻松完成的方法:

<div>
    <label class="required">Images</label>
    <div id="annonce_rent_images" data-prototype="<div><label class=&quot;required&quot;>__name__label__</label><div id=&quot;annonce_rent_images___name__&quot;><div><label for=&quot;annonce_rent_images___name___url&quot; class=&quot;required&quot;>Url</label><input type=&quot;url&quot; id=&quot;annonce_rent_images___name___url&quot; name=&quot;annonce_rent[images][__name__][url]&quot; required=&quot;required&quot; /></div><div><label for=&quot;annonce_rent_images___name___alt&quot; class=&quot;required&quot;>Alt</label><input type=&quot;text&quot; id=&quot;annonce_rent_images___name___alt&quot; name=&quot;annonce_rent[images][__name__][alt]&quot; required=&quot;required&quot; /></div></div></div>">
    </div>
</div>
<!-- ... -->
<button id="add_image">Add image</button>
<script src="/js/jquery-2.2.1.min.js"></script>
<script>
    function addEntry() {
        var $container = $('#annonce_rent_images'),
            $prototype = $container.data('prototype');
        $prototype.replace(/__name__/g, $container.children('div').length);
        $container.append($prototype);
    }
    addEntry(); // add a first field by default
    $('#add_image').click(addEntry);
</script>