title: Symfony 3.4 - Form collection with drop-down list
body: <p>In my symfony project I have two entity "Conducteur" and "Datevisite" with a one to many relationship.</p>
  
  <p>i have a limited number of datevisite between 1 and 3 determined by a drop-down list.</p>
  
  <p>the problem is that I insert each time 3 Datevisites even if I only have to insert one and I do not know how to do it.</p>
  
  <p>Conducteur entity : </p>
  
  <pre><code>class Conducteur{
      /**
       * @var Datevisite
       *
       * @ORM\OneToMany(targetEntity="PDF\RegBundle\Entity\Datevisite", mappedBy="fkConducteur", cascade="all")
       */
      private $datevisites;
  
      /**
       * Conducteur constructor.
       */
      public function __construct()
      {
          $this-&gt;datevisites = new ArrayCollection();
      }
  
      /**
       * @return \Doctrine\Common\Collections\Collection
       */
      public function getDatevisites()
      {
          return $this-&gt;datevisites;
      }
  
      /**
       * Add date
       * @param Datevisite $date
       * @return Conducteur
       */
      public function addDatevisite(Datevisite $date){
          $this-&gt;datevisites[] = $date;
          $date-&gt;setFkConducteur($this);
  
          return $this;
      }
  
      /**
       * remove date
       *
       * @param Datevisite $date
       */
      public function removeDatevisite(Datevisite $date){
          $this-&gt;datevisites-&gt;removeElement($date);
      }
  
  }
  </code></pre>
  
  <p>Datevisite entity : </p>
  
  <pre><code>class Datevisite{
  
      /**
       * @var \Typedatevisite
       *
       * @ORM\ManyToOne(targetEntity="Conducteur", inversedBy="datevisites")
       * @ORM\JoinColumn(name="fk_conducteur", referencedColumnName="Co_id")
       */
      private $fkConducteur;
  
  
  
      /**
       * Datevisite constructor.
       * @param Conducteur $fkConducteur
       */
      public function __construct(Conducteur $Conducteur = null)
      {
          $this-&gt;fkConducteur = $Conducteur;
      }
  
      /**
       * Set fkConducteur
       *
       * @param Conducteur $fkConducteur
       *
       * @return Datevisite
       */
      public function setFkConducteur(Conducteur $fkConducteur)
      {
          $this-&gt;fkConducteur = $fkConducteur;
  
          return $this;
      }
  
      /**
       * Get fkConducteur
       *
       * @return Conducteur
       */
      public function getFkConducteur()
      {
          return $this-&gt;fkConducteur;
      }
  }
  </code></pre>
  
  <p>Controller : </p>
  
  <pre><code>$conducteur = new Conducteur();    
          $em = $this-&gt;getDoctrine()-&gt;getManager();
  
          $formBuilder = $this-&gt;createFormBuilder($conducteur);
          $formBuilder-&gt;add('nom', TextType::class)
              -&gt;add('prenom', TextType::class)
              -&gt;add('societe', TextType::class)
              -&gt;add('refGroupe', TextType::class)
              -&gt;add('codeBillet', TextType::class)
              -&gt;add('typeBillet', ChoiceType::class, array(
                  'choices' =&gt; array('un jour' =&gt; 1, 'Deux jours' =&gt;2, 'Trois jours' =&gt; 3), 'multiple'=&gt; false))
  
              -&gt;add('datevisites', CollectionType::class, array(
                  'entry_type' =&gt; DatevisiteType::class,
                  'label' =&gt; 'Date(s) de visite(s)',
                  'allow_add' =&gt; true,
                  'allow_delete' =&gt; true,
                  'prototype' =&gt; true,
                  'by_reference' =&gt; false,
              ))
  
              -&gt;add('Enregistrer', SubmitType::class);
  
          $form = $formBuilder-&gt;getForm();
  
          if ($request-&gt;isMethod(Request::METHOD_POST)){
              $form-&gt;handleRequest($request);
  
              if ($form-&gt;isValid() &amp;&amp; $form-&gt;isSubmitted()){
                  $em-&gt;persist($conducteur);
                  $em-&gt;flush();
              }
  
          }
  
          return $this-&gt;render("PDFRegBundle::Conducteur/ajout.html.twig", array('form' =&gt; $form-&gt;createView(), 'notice' =&gt; $notice));
  </code></pre>
  
  <p>DatevisiteType : </p>
  
  <pre><code>public function buildForm(FormBuilderInterface $builder, array $options)
      {
          $builder-&gt;add('dvVisite', DateType::class, array(
              'widget' =&gt; 'single_text',
              'format' =&gt; 'yyyy-MM-DD',
              'label' =&gt; false,
              'html5' =&gt; false,
              'label_attr' =&gt; ['class' =&gt; 'col-md-2 control-label'],
              'attr' =&gt; ['class' =&gt; 'datetimepicker dateaddinput col-md-4']
          ));
      }
  </code></pre>
  
  <p>my twig : </p>
  
  <pre><code>&lt;!-- Content Wrapper. Contains page content --&gt;
      &lt;div class="content-wrapper"&gt;
        &lt;!-- Content Header (Page header) --&gt;
        &lt;section class="content-header"&gt;
          &lt;h1&gt;
                  Ajout conducteur
          &lt;/h1&gt;
        &lt;/section&gt;
  
          &lt;!-- Main content --&gt;
        &lt;section class="content"&gt;
  
          &lt;!-- Default box --&gt;
          &lt;div class="box"&gt;
            &lt;div class="box-body"&gt;
              &lt;div class="col-md-12"&gt;
                {{ form_start(form, {'attr': {'class': 'form-horizontal'}}) }}
                  {# Les erreurs générales du formulaire. #}
                  {{ form_errors(form) }}
  
                &lt;div class="form-group"&gt;
                    {# Génération du label. #}
                    {{ form_label(form.nom, "Nom", {'label_attr': {'class': 'col-sm-2 control-label'}}) }}
  
                    {# Affichage des erreurs pour ce champ précis. #}
                    {{ form_errors(form.nom) }}
  
                  &lt;div class="col-sm-10"&gt;
                      {# Génération de l'input. #}
                      {{ form_widget(form.nom, {'attr': {'class': 'form-control'}}) }}
                  &lt;/div&gt;
                &lt;/div&gt;
                &lt;div class="form-group"&gt;
                    {# Génération du label. #}
                    {{ form_label(form.prenom, "Prénom", {'label_attr': {'class': 'col-sm-2 control-label'}}) }}
  
                    {# Affichage des erreurs pour ce champ précis. #}
                    {{ form_errors(form.prenom) }}
  
                  &lt;div class="col-sm-10"&gt;
                      {# Génération de l'input. #}
                      {{ form_widget(form.prenom, {'attr': {'class': 'form-control'}}) }}
                  &lt;/div&gt;
                &lt;/div&gt;
                &lt;div class="form-group"&gt;
                    {# Génération du label. #}
                    {{ form_label(form.societe, "Société", {'label_attr': {'class': 'col-sm-2 control-label'}}) }}
  
                    {# Affichage des erreurs pour ce champ précis. #}
                    {{ form_errors(form.societe) }}
  
                  &lt;div class="col-sm-10"&gt;
                      {# Génération de l'input. #}
                      {{ form_widget(form.societe, {'attr': {'class': 'form-control'}}) }}
                  &lt;/div&gt;
                &lt;/div&gt;
                &lt;div class="form-group"&gt;
                    {# Génération du label. #}
                    {{ form_label(form.refGroupe, "Référence groupe", {'label_attr': {'class': 'col-sm-2 control-label'}}) }}
  
                    {# Affichage des erreurs pour ce champ précis. #}
                    {{ form_errors(form.refGroupe) }}
  
                  &lt;div class="col-sm-10"&gt;
                      {# Génération de l'input. #}
                      {{ form_widget(form.refGroupe, {'attr': {'class': 'form-control'}}) }}
                  &lt;/div&gt;
                &lt;/div&gt;
                &lt;div class="form-group"&gt;
                    {# Génération du label. #}
                    {{ form_label(form.codeBillet, "Code billet", {'label_attr': {'class': 'col-sm-2 control-label'}}) }}
  
                    {# Affichage des erreurs pour ce champ précis. #}
                    {{ form_errors(form.codeBillet) }}
  
                  &lt;div class="col-sm-10"&gt;
                      {# Génération de l'input. #}
                      {{ form_widget(form.codeBillet, {'attr': {'class': 'form-control'}}) }}
                  &lt;/div&gt;
                &lt;/div&gt;
                &lt;div class="form-group"&gt;
                    {# Génération du label. #}
                    {{ form_label(form.typeBillet, "Type de billet", {'label_attr': {'class': 'col-sm-2 control-label'}}) }}
  
                    {# Affichage des erreurs pour ce champ précis. #}
                    {{ form_errors(form.typeBillet) }}
  
                  &lt;div class="col-sm-10"&gt;
                      {# Génération de l'input. #}
                      {{ form_widget(form.typeBillet, {'attr': {'class': 'form-control'}}) }}
                  &lt;/div&gt;
                &lt;/div&gt;
                      {{ form_row(form.datevisites, {'attr': {'class': 'test'}}) }}
  
  
                {{ form_widget(form.Enregistrer, {'attr': {'class': 'btn btn_primary'}}) }}
  
                {{ form_end(form) }}
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
            &lt;!-- /.box-body --&gt;
  
  
        &lt;/section&gt;
        &lt;!-- /.content --&gt;
      &lt;/div&gt;
      &lt;!-- /.content-wrapper --&gt;
  
      &lt;footer class="main-footer"&gt;
      &lt;/footer&gt;
      &lt;!-- /.control-sidebar --&gt;
      &lt;!-- Add the sidebar's background. This div must be placed
           immediately after the control sidebar --&gt;
      &lt;div class="control-sidebar-bg"&gt;&lt;/div&gt;
    &lt;/div&gt;
    &lt;!-- ./wrapper --&gt;
  
  {% endblock %}
  
  {% block javascripts %}
    &lt;script type="text/javascript"&gt;
        $(document).ready(function () {
  
            $('.sidebar-menu').tree();
  
            var $container = $('div#form_datevisites');
  
                for ( var i = 0; i &lt; 3; i++){
                    var template = $container.attr('data-prototype')
                        .replace(/__name__label__/g, 'Date n°' + (i+1))
                        .replace(/__name__/g,        i)
                    ;
                    var $prototype = $(template);
                    $container.append($prototype);
                }
  
            $('#form_datevisites &gt; .form-group').get(1).style.display = "none";
            $('#form_datevisites &gt; .form-group').get(2).style.display = "none";
  
            console.log($(':input[id^="form_datevisites_0_dvVisite"]').value = null);
  
  
            $('#form_typeBillet').on('change', function () {
                console.log(this.value);
                if( this.value == 1){
                    $('#form_datevisites &gt; .form-group').get(1).style.display = "none";
                    $('#form_datevisites &gt; .form-group').get(2).style.display = "none";
                }else{
                    if(this.value == 2){
                        $('#form_datevisites &gt; .form-group').get(1).style.display = "block";
                        $('#form_datevisites &gt; .form-group').get(2).style.display = "none";
                    }else{
                        $('#form_datevisites &gt; .form-group').get(1).style.display = "block";
                        $('#form_datevisites &gt; .form-group').get(2).style.display = "block";
                    }
                }
            });
  
  
            $(function () {
                $('#form_datevisites_0_dvVisite').datetimepicker({
                    format: 'YYYY-MM-DD',
                    locale: 'fr',
                    minDate: moment().millisecond(0).second(0).minute(0).hour(0),
                    defaultDate: moment(),
                });
            });
  
            $(function () {
                $('#form_datevisites_1_dvVisite').datetimepicker({
                    format: 'YYYY-MM-DD',
                    locale: 'fr',
                    minDate: moment().add('days', 1).millisecond(0).second(0).minute(0).hour(0),
                });
            });
  
            $(function () {
                $('#form_datevisites_2_dvVisite').datetimepicker({
                    format: 'YYYY-MM-DD',
                    locale: 'fr',
                    minDate: moment().add('days', 2).millisecond(0).second(0).minute(0).hour(0),
                });
            });
  
            $(function () {
                $('.datetimepicker').datetimepicker({
                    format: 'YYYY-MM-DD',
                    locale: 'fr',
                });
            });
        })
    &lt;/script&gt;
  </code></pre>
  
  <p>How to add just the right number of Datevisite according to the user's choice ?</p>