Formulaires imbriques et multi data-prototype

**Mika2008** · 19/11/2016, 11h31

Bonjour,
voila j'ai une entité contrat qui une relation multi avec l'entité contact, cette entité contact à une relation multiple avec l'entité infoPremiumContact.

je créer mes entités, mes formType :

et maintenant j'arrive sur la parti twig,
je veux créer un formulaire ajout contrat, qui vas me permettre d'ajouter à la fois un ou plusieurs contacts, et dans chaque contact y ajouter les informations infoJava pour chaque contact.

voici mon form contact :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
<?php
 
namespace PP\PlatformBundle\Form;
 
use Symfony\Component\Form\AbstractType;
use Symfony\Component\Form\FormBuilderInterface;
use Symfony\Component\OptionsResolver\OptionsResolver;
use Symfony\Bridge\Doctrine\Form\Type\EntityType;
use Symfony\Component\Form\Extension\Core\Type\CheckboxType;
use Symfony\Component\Form\Extension\Core\Type\DateType;
use Symfony\Component\Form\Extension\Core\Type\SubmitType;
use Symfony\Component\Form\Extension\Core\Type\TextareaType;
use Symfony\Component\Form\Extension\Core\Type\TextType;
use Symfony\Component\Form\Extension\Core\Type\ChoiceType;
use Symfony\Component\Form\Extension\Core\Type\MoneyType;
use Symfony\Component\Form\FormEvent;
use Symfony\Component\Form\FormEvents;
use Symfony\Component\Form\Extension\Core\Type\CollectionType;
 
class contactType extends AbstractType
{
    /**
     * {@inheritdoc}
     */
    public function buildForm(FormBuilderInterface $builder, array $options)
    {
        $builder
        	->add('nom',     TextType::class)
        	->add('prenom',     TextType::class)
        	/*->add('infoPremiumContact', CollectionType::class, array(
        			'entry_type'   => infoPremiumContactType::class,
        			'allow_add'    => true,
        			'allow_delete' => true
        	))
        	*/
        ->add('infoPremiumContact', CollectionType::class,
        		array(
        				'entry_type'   => infoPremiumContactType::class,
        				'entry_options' => array(
        						'label' => 'Value',
        				),
        				'allow_add' => true,
        				'allow_delete' => true,
        				'prototype' => true,
        				'required' => false,
        				'attr' => array(
        						'class' => 'my-selectorIPC',
        				)))
 
        	->add('produit', EntityType::class, array(
        			'class' => 'PPPlatformBundle:produit',
        			'choice_label' => 'nom',
        	))
 
        ;
 
 
    }
 
    /**
     * {@inheritdoc}
     */
    public function configureOptions(OptionsResolver $resolver)
    {
        $resolver->setDefaults(array(
            'data_class' => 'PP\PlatformBundle\Entity\contact'
        ));
    }
 
    /**
     * {@inheritdoc}
     */
    public function getBlockPrefix()
    {
        return 'pp_platformbundle_contact';
    }
 
 
}

mon contrat form type :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
<?php
 
namespace PP\PlatformBundle\Form;
 
use Symfony\Component\Form\AbstractType;
use Symfony\Component\Form\FormBuilderInterface;
use Symfony\Component\OptionsResolver\OptionsResolver;
;
use Symfony\Component\Form\Extension\Core\Type\CheckboxType;
use Symfony\Component\Form\Extension\Core\Type\DateTimeType;
use Symfony\Component\Form\Extension\Core\Type\SubmitType;
use Symfony\Component\Form\Extension\Core\Type\TextareaType;
use Symfony\Component\Form\Extension\Core\Type\TextType;
use Symfony\Component\Form\Extension\Core\Type\ChoiceType;
use Symfony\Component\Form\Extension\Core\Type\MoneyType;
use Symfony\Bridge\Doctrine\Form\Type\EntityType;
use Symfony\Component\Form\Extension\Core\Type\CollectionType;
class contratType extends AbstractType
{
    /**
     * {@inheritdoc}
     */
    public function buildForm(FormBuilderInterface $builder, array $options)
    {
        $builder
        ->add('nom',	TextType::class)
        ->add('date',	DateTimeType::class)
        ->add('ca', MoneyType::class, array(
        		'data' => 0,
        		//    											'divisor' => 0.01,
        		'label' => 'Chiffre d\'affaire')
        		)
        		->add('typeContrat', EntityType::class, array(
        				'class' => 'PPPlatformBundle:typeContrat',
        				'choice_label' => 'nom',
        		))
        		->add('conseiller', EntityType::class, array(
        				'class' => 'PPPlatformBundle:conseiller',
        				'choice_label' => 'nom',
        		))
        		->add('contacts', CollectionType::class,
        				array(
        						'entry_type'   => contactType::class,
        						'entry_options' => array(
        								'label' => 'Value',
        						),
        						'allow_add' => true,
        						'allow_delete' => true,
        						'prototype' => true,
        						'required' => false,
        						'attr' => array(
        								'class' => 'my-selector',
        						),
 
        				))
 
 
        ;
    }
 
    /**
     * {@inheritdoc}
     */
    public function configureOptions(OptionsResolver $resolver)
    {
        $resolver->setDefaults(array(
            'data_class' => 'PP\PlatformBundle\Entity\contrat'
        ));
    }
 
    /**
     * {@inheritdoc}
     */
    public function getBlockPrefix()
    {
        return 'pp_platformbundle_contrat';
    }
 
 
}

et voici mon twig :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
{% extends "PPPlatformBundle::layout.html.twig" %}
 
{% block css_content %}
 
 
{% endblock %}
 
{% block x_content %}
    <h1>Contrat creation</h1>
 
{% form_theme form 'bootstrap_3_layout.html.twig' %}
 
 
    {{ form_start(form) }}
        {{ form_widget(form) }}
 
 
 
        {{ dump(form.contacts) }}
           {{ form_row(form.contacts) }}
  			<a href="#" id="add_contact" class="btn btn-default">Ajouter un contact</a>
 
		<a href="#" id="add_infoPremiumContact" class="btn btn-default">Ajouter une identifiant PREMIUM</a>
 
        <input type="submit" value="Create" />
    {{ form_end(form) }}
 
    <ul>
        <li>
            <a href="{{ path('contrat_index') }}">Back to the list</a>
        </li>
    </ul>
{% endblock %}
 
  		  {% block js_content %}
 
 
<script type="text/javascript">
  $(document).ready(function() {
	var $container = $('div#pp_platformbundle_contrat_contacts');
    var index = $container.find(':input').length;
    $('#add_contact').click(function(e) {
      addContact($container);
      e.preventDefault();
      return false;
    });
    if (index == 0) {
      addContact($container);
    } else {
      $container.children('div').each(function() {
        addDeleteLink($(this));
      });
    }
    function addContact($container) {
      var template = $container.attr('data-prototype')
        .replace(/__name__label__/g, 'Contact n°' + (index+1))
        .replace(/__name__/g,        index)
      ;
 
      var $prototype = $(template);
      addDeleteLink($prototype);
      $container.append($prototype);
      index++;
    }
 
    function addDeleteLink($prototype) {
      var $deleteLink = $('<a href="#" class="btn btn-danger">Supprimer</a>');
      $prototype.append($deleteLink);
      $deleteLink.click(function(e) {
        $prototype.remove();
        e.preventDefault(); // évite qu'un # apparaisse dans l'URL
        return false;
      });
    }
  });
 
 
</script>
{% endblock %}

donc avec cette version de twig, je peux ajouter autant de contact que je veux, mais je n'ai pas jouter le arrayCollection infoPremiumContact

du coup, ma question c'est comment ajouter infoPremiumContact dans mon formulaire svp

**Mika2008** · 19/11/2016, 16h06

Bonjour,
je pense avoir ciblé ma problématique, en fait c'est le code javaascript qui me pose probléme, voici mon twig et avec mon javascript :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
{% extends "PPPlatformBundle::layout.html.twig" %}
 
{% block css_content %}
 
 
{% endblock %}
 
{% block x_content %}
    <h1>Contrat creation</h1>
 
{% form_theme form 'bootstrap_3_layout.html.twig' %}
 
    {{ form_start(form) }}
        {{ form_widget(form) }}
 
           {{ form_row(form.contacts) }}
  			<a href="#" id="add_contact" class="btn btn-default">Ajouter un contact</a>
 
			<a href="#" id="add_infoPremiumContact" class="btn btn-default">Ajouter une identifiant</a>
 
        <input type="submit" value="Create" />
    {{ form_end(form) }}
 
    <ul>
        <li>
            <a href="{{ path('contrat_index') }}">Back to the list</a>
        </li>
    </ul>
{% endblock %}
 
  		  {% block js_content %}
 
 
<script type="text/javascript">
  $(document).ready(function() {
    // On récupère la balise <div> en question qui contient l'attribut « data-prototype » qui nous intéresse.
    var $container = $('div#pp_platformbundle_contrat_contacts');
 
    // On définit un compteur unique pour nommer les champs qu'on va ajouter dynamiquement
    var index = $container.find(':input').length;
 
    // On ajoute un nouveau champ à chaque clic sur le lien d'ajout.
    $('#add_contact').click(function(e) {
    	addContact($container);
 
      e.preventDefault(); // évite qu'un # apparaisse dans l'URL
      return false;
    });
 
    // On ajoute un premier champ automatiquement s'il n'en existe pas déjà un (cas d'une nouvelle annonce par exemple).
    if (index == 0) {
      addContact($container);
    } else {
      // S'il existe déjà des contacts, on ajoute un lien de suppression pour chacune d'entre elles
      $container.children('div').each(function() {
        addDeleteLink($(this));
      });
    }
 
                // La fonction qui ajoute un formulaire ContactType
                function addContact($container) {
 
          console.log($container);
 
                  // Dans le contenu de l'attribut « data-prototype », on remplace :
                  // - le texte "__name__label__" qu'il contient par le label du champ
                  // - le texte "__name__" qu'il contient par le numéro du champ
                  var template = $container.attr('data-prototype')
                    .replace(/__name__label__/g, 'Contact n°' + (index+1))
                    .replace(/__name__/g,        index)
                  ;
 
                  // On crée un objet jquery qui contient ce template
                  var $prototype = $(template);
 
                  // On ajoute au prototype un lien pour pouvoir supprimer la catégorie
                  addDeleteLink($prototype);
 
                  // On ajoute le prototype modifié à la fin de la balise <div>
                  $container.append($prototype);
 
                  		 var $container2 = $('div#pp_platformbundle_contrat_contacts_'+index+'_infoPremiumContacts');
                  		 var indexIPC = $container2.find(':input').length;
                  		addInfoPremiumContact($container2);
 
 
                  // Enfin, on incrémente le compteur pour que le prochain ajout se fasse avec un autre numéro
                  index++;
                }
 
                // La fonction qui ajoute un formulaire ContactType
                function addInfoPremiumContact($container) {
 
                	  console.log($container);
                  // Dans le contenu de l'attribut « data-prototype », on remplace :
                  // - le texte "__name__label__" qu'il contient par le label du champ
                  // - le texte "__name__" qu'il contient par le numéro du champ
                  var template = $container.attr('data-prototype')
                    .replace(/__name__label__/g, 'InfoPremium n°' + (indexIPC+1))
                    .replace(/__name__/g,        indexIPC)
                  ;
 
                  // On crée un objet jquery qui contient ce template
                  var $prototype = $(template);
 
                  // On ajoute au prototype un lien pour pouvoir supprimer la catégorie
                  addDeleteLink($prototype);
 
                  // On ajoute le prototype modifié à la fin de la balise <div>
                  $container.append($prototype);
 
 
 
 
                  // Enfin, on incrémente le compteur pour que le prochain ajout se fasse avec un autre numéro
                  index++;
                }
 
 
                // La fonction qui ajoute un lien de suppression d'une catégorie
                function addDeleteLink($prototype) {
                  // Création du lien
                  var $deleteLink = $('<a href="#" class="btn btn-danger">Supprimer</a>');
 
                  // Ajout du lien
                  $prototype.append($deleteLink);
 
                  // Ajout du listener sur le clic du lien pour effectivement supprimer la catégorie
                  $deleteLink.click(function(e) {
                    $prototype.remove();
 
                    e.preventDefault(); // évite qu'un # apparaisse dans l'URL
                    return false;
                  });
                }
  });
</script>
 
 
                  {% endblock %}

donc la dans le javascript il faut que j'ajoute le champ infPremiiumContact en array collection.
mais je n'arrive pas à le faire car, pour que le javascript fonctionne il faut créer un {{ form_row(form.contacts.infoPremiumContact) }}
mais je ne peux pas car il n'est pas disponible dans :

form.contacts

qu'en pensez vous svp ?

**newman8** · 11/09/2018, 16h04

Bonjour,

As tu trouvé une solution a ton problème?

merci d'avance

Formulaires imbriques et multi data-prototype

PHP

Vue hybride

Discussions similaires

Partager

Partager