Symfony- Formulaire dynamique dans une collection
othye
Bonjour , Si quelqu'un peut m'aider, j'ai un soucis sur un formulaire dynamique dans une collection.
AppointType
public function buildForm(FormBuilderInterface $builder, array $options)
{
$builder
->add('profs', EntityType::class, [
// looks for choices from this entity
'class' => Professeur::class,
'placeholder' => 'Selectionner un Professeur',
'required' => true,
'attr' => [
'class' => 'profs_Select',
],
])
->add('times', ChoiceType::class, [
'attr' => [
'class' => 'time_Select',
],
])
;
$builder->get('profs')->addEventListener(
FormEvents::POST_SUBMIT,
function (FormEvent $event) {
$form = $event->getForm();
$this->addTimeField($form->getParent(), $form->getData());
}
);
}
private function addTimeField(FormInterface $form, ?Professeur $prof)
{
$builder = $form->getConfig()->getFormFactory()->createNamedBuilder(
'times',
EntityType::class,
null,
[
'class' => TimeSlot::class,
'placeholder' => $prof ? 'Sélectionnez votre TimeSlot' : 'Sélectionnez votre professeur',
'attr' => [
'class' => 'time_Select',
],
'mapped' => false,
'required' => true,
'auto_initialize' => false,
'query_builder' => function (EntityRepository $er) use ($prof) {
return $er->createQueryBuilder('t')
->where('t.is_available = true')
->andWhere('t.prof = :prof')
->setParameter('prof', $prof)
;
},
'choice_value' => function (?TimeSlot $time) {
return $time ? $time->getTime() : '';
}
]
);
$form->add($builder->getForm());
}
public function __construct(EntityManagerInterface $em) {
$this->em = $em;
}ParentsType
public function buildForm(FormBuilderInterface $builder, array $options)
{
$builder
->add('nom')
->add('prenom')
->add('nom_app')
->add('prenom_app')
->add('mail')
->add('phone')
->add('appoints', CollectionType::class, [
'entry_type' => AppointsType::class,
'by_reference' => false,
'allow_add' => true,
'allow_delete' => true,
'error_bubbling' => false,
'entry_options' => [
'attr' => ['class' => 'appoints-box'],
],
])
;
}Ma vue Twig
{{ form_start(form) }}
<div class="card devis-form">
<!-- Step 1 -->
<div id="clientinfo" class="card-body p-5 step">
<div class="row pt-3">
<div class="col-md-6 col-6 col-lg-6">
{{ form_row(form.nom, {
'label': 'Nom :' ,
}
)}}
</div>
<div class="col-md-6 col-12 col-lg-6">
{{ form_row(form.prenom, {
'label': 'Prénom :' ,
}
)}}
</div>
</div>
<div class="row pt-3">
<div class="col-md-6 col-6 col-lg-6">
{{ form_row(form.nom_app, {
'label': 'Nom de l\'apprent(e):' ,
}
)}}
</div>
<div class="col-md-6 col-12 col-lg-6">
{{ form_row(form.prenom_app, {
'label': 'Prénom de l\'apprent(e):' ,
}
)}}
</div>
</div>
<div class="row pt-3">
<div class="col-md-6 col-6 col-lg-6">
{{ form_row(form.mail, {
'label': 'E-mail :' ,
}
)}}
</div>
<div class="col-md-6 col-12 col-lg-6">
{{ form_row(form.phone, {
'label': 'Télephone :' ,
}
)}}
</div>
</div>
<div class="text-left text-muted" style="font-size:.7em;"><b style="color: #dc3545">*</b> Champs obligatoire</div>
</div>
<div class="card-body p-5 step" style="display: none" id="rendez-vous">
{{ form_label(form.appoints) }}
{{ form_errors(form.appoints) }}
<ul id="appoints-fields-list"
data-prototype="{{ form_widget(form.appoints.vars.prototype)|e }}"
data-widget-tags="{{ '<li></li>'|e }}"
data-widget-counter="{{ form.appoints|length }}"
>
{% for appoints in form.appoints %}
<li class="form-rdv">
{{ form_errors(appoints) }}
{{ form_widget(appoints) }}
</li>
{% endfor %}
</ul>
<button type="button"
class="rendez-vous-add"
data-list-selector="#appoints-fields-list">Add another email</button>
</div>
<div class="card-footer">
<div class="d-flex flex-row-reverse bd-highlight">
<a class="action back btn btn-sm btn-outline-warning bd-highlight m-2" style="display: none">Précédent</a>
<a class="action next btn btn-sm btn-outline-secondary ms-auto bd-highlight m-2" disabled="" data-button="save">Suivant</a>
<button class="action submit btn btn-sm btn-outline-success ms-auto bd-highlight m-2" style="display: none">Envoyer</button>
</div>
</div>
</div>
{{ form_end(form) }}Mon Jquery
//Pour le formulaire dynamique
$(document).on('change', '.profs_Select ', function() {
let $field = $(this)
let $degreeField = $('.profs_Select')
let $form = $field.closest('form')
// Les données à envoyer en Ajax
let data = {}
data[$degreeField.attr('name')] = $degreeField.val()
data[$field.attr('name')] = $field.val()
// On soumet les données
$.post($form.attr('action'), data).then(function(data) {
// On récupère le nouveau <select>
let $input = $(data).find('.time_Select')
// On remplace notre <select> actuel
$('.time_Select').replaceWith($input)
$('.time_Select').prop("disabled", false);
})
});
//Ajouter ma collection
jQuery('.rendez-vous-add').click(function (e) {
var list = jQuery(jQuery(this).attr('data-list-selector'));
var counter = list.data('widget-counter') || list.children().length;
var newWidget = list.attr('data-prototype');
newWidget = newWidget.replace(/__name__/g, counter);
counter++;
list.data('widget-counter', counter);
var newElem = jQuery(list.attr('data-widget-tags')).html(newWidget);
newElem.appendTo(list);
});
Ce que je veux
Ce que je veux que le parent (ParentsType) peut ajouter un ou plusieur rendez vous avec des profs, à la selection du prof, on lui affiche les créneaux disponible(AppointType)
Il peut ajouter par exemple 10 rendez avec 10 profs differents
Ce que j'obtiens
ce que j'obtiens avec mon code que à la selection du prof j'ai bien les créneau disponible , mais on ajoutant un nouveau ça me mets deux select pour le times, si j'aijoute un nouveau rdv ça me mets 3 select de temps....
J'espète que j'etais claire.
Je vous remercie d'avance pour votre aide.