title: Symfony Render a Collection Form Type Prototype
body: <p>I try to render the collection type prototype I create with an embed collection form.
  I read the documentation on Symonfy, Github, ... but don't succeed to understand the way to use the block to render the form.
  Here I have a form (RegistrationFormType) based on the User entity which has an embed collection form of Adress (AdressFormType).
  I succeed to add the button and generate new adress on the form but I would like to have my prototype with the same layout as the one of my first adress (retrieved from DB).
  Could you help me to understand what I do wrong please?</p>
  <p><strong>Here my RegistrationFormType</strong></p>
  <pre><code>&lt;?php
  
  namespace App\Form;
  
  use App\Entity\User;
  //use Doctrine\DBAL\Types\TextType;
  use Symfony\Component\Form\Extension\Core\Type\CollectionType;
  use Symfony\Component\Form\Extension\Core\Type\TextType;
  use Symfony\Component\Form\AbstractType;
  use Symfony\Component\Form\Extension\Core\Type\CheckboxType;
  use Symfony\Component\Form\Extension\Core\Type\ChoiceType;
  use Symfony\Component\Form\Extension\Core\Type\TelType;
  use Symfony\Component\Form\Extension\Core\Type\PasswordType;
  use Symfony\Component\Form\FormBuilderInterface;
  use Symfony\Component\OptionsResolver\OptionsResolver;
  use Symfony\Component\Validator\Constraints\IsTrue;
  use Symfony\Component\Validator\Constraints\Length;
  use Symfony\Component\Validator\Constraints\NotBlank;
  use Symfony\Component\Form\CallbackTransformer;
  
  
  class RegistrationFormType extends AbstractType
  {
      public function buildForm(FormBuilderInterface $builder, array $options)
      {
          $builder
              -&gt;add('roles',ChoiceType::class,[
                  'choices'=&gt;[
                  'Specialist'=&gt;'Role_Specialist',
                  'Parent'=&gt;'Role_Parent',
                  'Center'=&gt;'Role_Center',],
                  'label'=&gt;&quot;Je m'inscris en tant que&quot;])
              -&gt;add('name')
              -&gt;add('firstname',TextType::class, [
                  'label' =&gt; 'Firstname',
                  'row_attr' =&gt; [
                      'id' =&gt; 'firstname'
                  ],])
              -&gt;add('email')
              -&gt;add('phone',TelType::class)
              -&gt;add('NISS',TextType::class, [
                  'label' =&gt; 'NISS',
                  'row_attr' =&gt; [
                      'id' =&gt; 'NISS'
                  ]
                  ,
                  'required'=&gt;'false',
                  ])
              -&gt;add('BCE',TextType::class, [
                  'label' =&gt; 'BCE',
                  'row_attr' =&gt; [
                      'id' =&gt; 'BCE'
                  ],
                  'required'=&gt;'false'])
              -&gt;add('agreeTerms', CheckboxType::class, [
                  'mapped' =&gt; false,
                  'constraints' =&gt; [
                      new IsTrue([
                          'message' =&gt; 'You should agree to our terms.',
                      ]),
                  ],
              ])
              -&gt;add('plainPassword', PasswordType::class, [
                  // instead of being set onto the object directly,
                  // this is read and encoded in the controller
                  'mapped' =&gt; false,
                  'attr' =&gt; ['autocomplete' =&gt; 'new-password'],
                  'constraints' =&gt; [
                      new NotBlank([
                          'message' =&gt; 'Please enter a password',
                      ]),
                      new Length([
                          'min' =&gt; 6,
                          'minMessage' =&gt; 'Your password should be at least {{ limit }} characters',
                          // max length allowed by Symfony for security reasons
                          'max' =&gt; 4096,
                      ]),
                  ],
              ])
              //imbrication de adress dans le formulaire user afin de retrouver toutes les adresses qui lui sont référées
              -&gt;add('adress',CollectionType::class,[
                  'entry_type' =&gt; AdressType::class,
                  'entry_options' =&gt; ['label' =&gt; false],
                  'allow_add' =&gt; true,
                  'block_name' =&gt; 'adress'
  
              ])
          ;
          // Data transformer
          $builder-&gt;get('roles')
              -&gt;addModelTransformer(new CallbackTransformer(
                  function ($rolesArray) {
                      // transform the array to a string
                      return count($rolesArray)? $rolesArray[0]: null;
                  },
                  function ($rolesString) {
                      // transform the string back to an array
                      return [$rolesString];
                  }
              ));
      }
  
      public function configureOptions(OptionsResolver $resolver)
      {
          $resolver-&gt;setDefaults([
              'data_class' =&gt; User::class,
          ]);
      }
  }
  </code></pre>
  <p><strong>AdressType</strong></p>
  <pre><code>&lt;?php
  
  namespace App\Form;
  
  use App\Entity\Adress;
  use Symfony\Component\Form\AbstractType;
  use Symfony\Component\Form\Extension\Core\Type\ChoiceType;
  use Symfony\Component\Form\Extension\Core\Type\HiddenType;
  use Symfony\Component\Form\Extension\Core\Type\TextType;
  use Symfony\Component\Form\FormBuilderInterface;
  use Symfony\Component\OptionsResolver\OptionsResolver;
  
  class AdressType extends AbstractType
  {
      public function buildForm(FormBuilderInterface $builder, array $options)
      {
          $builder
              -&gt;add('type',ChoiceType::class,[
                  'choices' =&gt;[
                      'Adresse Principale' =&gt; 'Principale',
                      'Adresse Secondaire' =&gt; 'Secondaire'
                      ]
              ])
              -&gt;add('housenumber',TextType::class,[
                  'label'=&gt;'N°'
              ])
              -&gt;add('additional_info',TextType::class,[
                  'label'=&gt;'Apt/Etage/...',
                  'required'=&gt;false
              ])
              -&gt;add('street', TextType::class, [
                  'label' =&gt; 'Rue',
                  'row_attr' =&gt; [
                      'id' =&gt; 'Adress2'
                  ],])
              -&gt;add('postalcode')
              -&gt;add('city')
              -&gt;add('region')
              -&gt;add('country')
              -&gt;add('latitude', HiddenType::class)
              -&gt;add('longitude', HiddenType::class)
  //            -&gt;add('users')
  
          ;
      }
  
      public function configureOptions(OptionsResolver $resolver)
      {
          $resolver-&gt;setDefaults([
              'data_class' =&gt; Adress::class,
          ]);
      }
  }
  </code></pre>
  <p><strong>The twig template</strong></p>
  <pre><code>{% extends 'base.html.twig' %}
  
  {% block title %}Register{% endblock %}
  {% block body %}
  
      {% for flashError in app.flashes('verify_email_error') %}
          &lt;div class=&quot;alert alert-danger&quot; role=&quot;alert&quot;&gt;{{ flashError }}&lt;/div&gt;
      {% endfor %}
      &lt;div class=&quot;container&quot;&gt;
      {{ form_start(registrationForm) }}
      &lt;div class=&quot;form-group&quot;&gt;{{ form_row(registrationForm.roles) }}&lt;/div&gt;
      &lt;div class=&quot;form-row&quot;&gt;
          &lt;div class=&quot;form-group col-md-6&quot;&gt;{{ form_row(registrationForm.name) }}&lt;/div&gt;
          &lt;div class=&quot;form-group col-md-6&quot;&gt;{{ form_row(registrationForm.firstname) }}&lt;/div&gt;
      &lt;/div&gt;
      &lt;div class=&quot;form-row&quot;&gt;
          &lt;div class=&quot;form-group col-md-6&quot;&gt;{{ form_row(registrationForm.email) }}&lt;/div&gt;
          &lt;div class=&quot;form-group col-md-6&quot;&gt;{{ form_row(registrationForm.plainPassword, {
                  label: 'Password'
              }) }}&lt;/div&gt;
      &lt;/div&gt;
      &lt;div class=&quot;form-row&quot;&gt;
          &lt;div class=&quot;form-group col-md-4&quot;&gt;{{ form_row(registrationForm.phone) }}&lt;/div&gt;
          &lt;div class=&quot;form-group col-md-4&quot;&gt;{{ form_row(registrationForm.NISS, {label: 'NISS'}) }}&lt;/div&gt;
          &lt;div class=&quot;form-group col-md-4&quot;&gt;{{ form_row(registrationForm.BCE, {label: 'BCE'}) }}&lt;/div&gt;
      &lt;/div&gt;
  {#        @TODO formatter pour qu'on differencie bien les adresses entre elles par block. Cf block en dessous#}
          &lt;h3&gt;Adresses&lt;/h3&gt;
          {% block _registration_form_adress_entry_widget %}
          &lt;div class=&quot;adress&quot; data-prototype=&quot;{{ form_widget(registrationForm.adress.vars.prototype)|e('html_attr') }}&quot;&gt;
              {% for adress in registrationForm.adress %}
              &lt;div class=&quot;form-group col-md-4&quot;&gt;{{ form_row(adress.type) }}&lt;/div&gt;
          &lt;div class=&quot;form-row&quot;&gt;
                  &lt;div class=&quot;form-group col-md-4&quot;&gt;{{ form_row(adress.street) }}&lt;/div&gt;
                  &lt;div class=&quot;form-group col-md-4&quot;&gt;{{ form_row(adress.housenumber) }}&lt;/div&gt;
                  &lt;div class=&quot;form-group col-md-4&quot;&gt;{{ form_row(adress.additional_info) }}&lt;/div&gt;
          &lt;/div&gt;
          &lt;div class=&quot;form-row&quot;&gt;
              &lt;div class=&quot;form-group col-md-3&quot;&gt;{{ form_row(adress.postalcode) }}&lt;/div&gt;
              &lt;div class=&quot;form-group col-md-3&quot;&gt;{{ form_row(adress.city) }}&lt;/div&gt;
              &lt;div class=&quot;form-group col-md-3&quot;&gt;{{ form_row(adress.region) }}&lt;/div&gt;
              &lt;div class=&quot;form-group col-md-3&quot;&gt;{{ form_row(adress.country) }}&lt;/div&gt;
          &lt;/div&gt;
              {% endfor %}
          &lt;/div&gt;
  
          &lt;button type=&quot;button&quot; class=&quot;add_item_link&quot; data-collection-holder-class=&quot;adress&quot;&gt;Add an adress&lt;/button&gt;
  
  
  
          {{ form_end(registrationForm) }}
          {% endblock %}
      &lt;/div&gt;
      &lt;script&gt;
          const addFormToCollection = (e) =&gt; {
              const collectionHolder = document.querySelector('.' + e.currentTarget.dataset.collectionHolderClass);
  
              const item = document.createElement('li');
  
              item.innerHTML = collectionHolder
                  .dataset
                  .prototype
                  .replace(
                      /__name__/g,
                      collectionHolder.dataset.index
                  );
  
              collectionHolder.appendChild(item);
  
              collectionHolder.dataset.index++;
          };
          document
              .querySelectorAll('.add_item_link')
              .forEach(btn =&gt; btn.addEventListener(&quot;click&quot;, addFormToCollection));
  
      &lt;/script&gt;
  {% endblock %}
  {#{% block registration_form_adress_entry_row %}#}
  {#    &lt;div class=&quot;form-row&quot;&gt;#}
  {#        &lt;div class=&quot;form-group col-md-4&quot;&gt;{{ form_row(adress.street) }}&lt;/div&gt;#}
  {#            &lt;div class=&quot;form-group col-md-4&quot;&gt;{{ form_row(adress.housenumber) }}&lt;/div&gt;#}
  {#            &lt;div class=&quot;form-group col-md-4&quot;&gt;{{ form_row(adress.additional_info) }}&lt;/div&gt;#}
  {#        &lt;/div&gt;#}
  {#        &lt;div class=&quot;form-row&quot;&gt;#}
  {#            &lt;div class=&quot;form-group col-md-3&quot;&gt;{{ form_row(adress.postalcode) }}&lt;/div&gt;#}
  {#            &lt;div class=&quot;form-group col-md-3&quot;&gt;{{ form_row(adress.city) }}&lt;/div&gt;#}
  {#            &lt;div class=&quot;form-group col-md-3&quot;&gt;{{ form_row(adress.region) }}&lt;/div&gt;#}
  {#            &lt;div class=&quot;form-group col-md-3&quot;&gt;{{ form_row(adress.country) }}&lt;/div&gt;#}
  {#    &lt;/div&gt;#}
  {#{% endblock %}#}
  </code></pre>
  <p>The code rendering
  <a href="https://i.stack.imgur.com/ZQCzV.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ZQCzV.png" alt="enter image description here" /></a></p>
  <p>Thank you :)</p>