Utilisation de CollectionType

Elfepee
PHP Symfony

Hello, je cherche à mettre en place un formulaire avec un champ on l'on pourra ajouter des url de videos youtubes, mais le nombre de videos que l'utilisateur peut mettre est indeterminé. Pour ceci j'ai pensé à utilisé les CollectionType, mais je rencontre quelques problèmes et incompréhension avec ces derniers. Voici mon code :

voici mon form builder : 

->add('videos', CollectionType::class, [
            // each entry in the array will be an "email" field
            'entry_type' => TextType::class,
            'allow_add' => true,
            'allow_delete' => true,
            'prototype' => true,
            'prototype_data' => "URL d'une video youtube",
            // these options are passed to each "email" type
            'entry_options' => [
                'attr' => ['class' => 'videos-box'],
            ],

Ma vue :

<ul id="video-fields-list"
        data-prototype="{{ form_widget(form.videos.vars.prototype)|e }}"
        data-widget-tags="{{ '<li></li>'|e }}"
        data-widget-counter="{{ form.videos|length }}">
          {% for videoField in form.videos %}
            <li>
                {{ form_errors(videoField) }}
                {{ form_widget(videoField) }}
            </li>
          {% endfor %}
        </ul>

    <button type="button" class="add-another-collection-widget" data-list-selector="#email-fields-list">Ajouter une nouvelle vidéo</button>

et mon JS :

jQuery(document).ready(function () {
  jQuery('.add-another-collection-widget').click(function (e) {
      var list = jQuery(jQuery(this).attr('data-list-selector'));
      // Try to find the counter of the list or use the length of the list
      var counter = list.data('widget-counter') || list.children().length;

      // grab the prototype template
      var newWidget = list.attr('data-prototype');
      // replace the "__name__" used in the id and name of the prototype
      // with a number that's unique to your emails
      // end name attribute looks like name="contact[emails][2]"
      newWidget = newWidget.replace(/__name__/g, counter);
      // Increase the counter
      counter++;
      // And store it, the length cannot be used if deleting widgets is allowed
      list.data('widget-counter', counter);

      // create a new list element and add it to the list
      var newElem = jQuery(list.attr('data-widget-tags')).html(newWidget);
      newElem.appendTo(list);
  });
});

Ce que je veux

je veux donc un champ de texte basique, mais sous ce dernier un bouton ajouter pour pouvoir mettre plusieurs url

Ce que j'obtiens

Je n'obtiens aucune erreur, juste aucun champ ne s'affiche et le bouton "ajouter" ne fonctionne pas.

Dans la doc il y a plusieurs point que j'ai pas compris, déjà dans le js il y a écrit

replace the "__name__" used in the id and name of the prototype
      // with a number that's unique to your emails<br><br>

et je n'ai pas vraiment compris par quoi je devais remplacer. Le deuxième point que je n'ai pas compris est, je pense, relié au premier point : c'est la partie "adding and removing items" : https://symfony.com/doc/current/reference/forms/types/collection.html#adding-and-removing-items

Je ne comprends pas vraiment on sont sensé être ces inputs.

Et le dernier point que je ne comprends pas est la partie "prototype", où suis-je sensé placé le modèle ?

Je vous ai exposé tous mes questionnement, désolé si ce n'est pas très clair, c'est un peu fouilli dans ma tête pour le moment. Merci d'avance pour vos réponse !

Aucune réponse