Symfony/Jqueryオブジェクトのコレクション

Question

私はSymfonyにWebアプリケーションを持っています。私はオブジェクトのコレクション（ユーザーが多くのアドレスを持っている）を持っているとき、私はJavaScript/jQueryメソッドを実装して、ユーザーが（https://symfony.com/doc/current/form/form_collections.html）のアドレス数を追加できるようにする必要があります。

はすべてのラベルとすべての入力タグを特定のdiv（<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12"></div>など）で囲みたいと思っていますが、何回か試してみるとできません。手伝って頂けますか ？

マイコード：

var collectionHolder; 

// Set up an "add address" link 

var addAddressLink = $('<a href="#" class="add_address_link">Add address</a>'); 
var newLinkP = $('<p class="centered"></p>').append(addAddressLink); 

function addAddressForm(collectionHolder, newLinkP){ 

    // Get the data prototype 
    var prototype = collectionHolder.data('prototype'); 

    // get the new index 
    var index = collectionHolder.data('index'); 

    // Replace '__name__' in the prototype's HTML 
    //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 new item 
    collectionHolder.data('index', index+1); 

    //Display the form in the page nan li, before the "add address" link 
    var newFormP = $('<div class="one-address"></div>').append(newForm); 
    newLinkP.before(newFormP) 
} 

jQuery(document).ready(function(){ 
    // Get the div that holds the collection of addresses 
    collectionHolder = $('div#addressList'); 

    // add the "add address" anchor 
    collectionHolder.append(newLinkP); 

    // Count the current form inputs 
    // use that as the new index when inserting a new item 
    collectionHolder.data('index', collectionHolder.find(':input').length); 
    addAddressLink.on('click', function(e) 
    { 
     // Prevent the link from creating a "#" on the URL 
     e.preventDefault(); 
     // add a new address form 
     addAddressForm(collectionHolder, newLinkP); 
    }) 
}); 

I：このコードはアドレスを追加することを提案

<div id="AddChildStep1_child_addresses___name__"> 
    <div class="form-group"> 
     <label class="control-label required" for="AddChildStep1_child_addresses___name___street1">Street1</label> 
     <input type="text" id="AddChildStep1_child_addresses___name___street1" name="AddChildStep1[child][addresses][__name__][street1]" required="required" maxlength="100" pattern=".{5,}" class="form-control" /> 
    </div> 
    <div class="form-group"> 
     <label class="control-label" for="AddChildStep1_child_addresses___name___street2">Street2</label> 
     <input type="text" id="AddChildStep1_child_addresses___name___street2" name="AddChildStep1[child][addresses][__name__][street2]" maxlength="100" class="form-control" /> 
    </div> 
    <div class="form-group"> 
     <label class="control-label" for="AddChildStep1_child_addresses___name___number">Number</label> 
     <input type="number" id="AddChildStep1_child_addresses___name___number" name="AddChildStep1[child][addresses][__name__][number]" class="form-control" /> 
    </div> 
    <div class="form-group"> 
     <label class="control-label" for="AddChildStep1_child_addresses___name___box">Box</label> 
     <input type="number" id="AddChildStep1_child_addresses___name___box" name="AddChildStep1[child][addresses][__name__][box]" class="form-control" /> 
    </div> 
    <div class="form-group"> 
     <label class="control-label" for="AddChildStep1_child_addresses___name___locality">Locality</label> 
     <select id="AddChildStep1_child_addresses___name___locality" name="AddChildStep1[child][addresses][__name__][locality]" class="form-control"> 
      <option value=""></option> 
      <option value="1">1080 - Molenbeek-Saint-Jean - BELGIUM</option> 
      <option value="2">1060 - Saint-Gilles - BELGIUM</option> 
      <option value="3">1050 - Ixelles - BELGIUM</option> 
     </select> 
    </div> 
    <div class="form-group"> 
     <label class="control-label required" for="AddChildStep1_child_addresses___name___addressType">Address type</label> 
     <select id="AddChildStep1_child_addresses___name___addressType" name="AddChildStep1[child][addresses][__name__][addressType]" class="form-control"> 
      <option value="HOME">Home</option> 
      <option value="WORK">Work</option> 
      <option value="HOLIDAYS">Holidays</option> 
      <option value="OTHER">Other</option> 
     </select> 
    </div> 
</div> 

そしてsymfonyのドキュメント：data-prototype="..."で{{ form_widget(parent_form.addresses.vars.prototype)|e }}はこのHTMLを生成

<div class="row"> 
    <div id="addressList" data-prototype="{{ form_widget(parent_form.addresses.vars.prototype)|e }}"> 

    </div> 
</div> 

したいと思う すべてのラベル要素とすべての入力要素（div.one-addressにある）を<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12></div>で囲みます。

Answer 1

いつでもフォームレンダリングを任意のレベルでカスタマイズできます。ここでは、特定の小枝のためにカスタマイズする必要があります。これはdocumentです。あなたの必要に応じて上書きするform_labelとform_widgetブロックを選択することができます。

{% form_theme form _self %} 

{% block form_label %} 
    <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12> 
     {{- parent() -}} 
    </div> 
{% endblock %} 

{% block form_widget %} 
    <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12> 
     {{- parent() -}} 
    </div> 
{% endblock %} 

上記のコードformは、小枝のフォーム変数です。

コレクションフィールドのみが異なる構造を持つようにするには、別の小枝に保存し、メインの小枝に含めます。その後、付属の小枝のみをカスタマイズします。

PS：コードはテストされていません。

希望すると便利です。