Formulaire en plusieurs étapes

Par jeanMat, il y a 2 ans

PHP Symfony

Bonjour,

Je tavaille avec Symfony 5.4
Je cherche à faire un formulaire qui se validerait étape par étape.
Dans un premier temps, afficher 4 champs relatifs à l'identité de la personnes (nom/prenom/mail/tel) avec des contraintes NotBlank.
Au submit, si ils sont mal renseigné, réafficher ce formualire avec les erreurs (ça c'est ok).
Et si tout est bon, alors réafficher le formulaire mais avec des champs en plus. Et c'est là que ça coince.

J'arrive à faire à peu près des trucs en m'appuyant sur la doc : https://symfony.com/doc/current/form/dynamic_form_modification.html#dynamic-generation-for-submitted-forms

En utilisant

$builder->get('champ1')->addEventListener(FormEvents::POST_SUBMIT,function (FormEvent $event) { // Ajout des nouveaux champs au formulaire $event->getForm()->getParent()->add('champ5', TextType::class); });

Le truc c'est que je veux ajouter ce nouveau champ seulement si les 4 premiers sont ok et pas que le premier.

Déjà est ce faisable ?
Si oui, comment ?

Si il n'y a pas de solution avec Symfony, je pense faire un formulaire "complet" dès le début et gérer en JS le fonctionnement souhaité.

Merci à vous.
Bonne journée

3 réponses

popotte, il y a 2 ans

Hello :)

Alors en théorie c'est possible en Symfony, formulaire en plusieurs page, tu enregistres les précédentes données pour les reafficher dans le formulaire, bon très bricolage quoi, la façon la plus propre serait de passer par JS

Coté JS tu ufais un appel API vers une route api Symfony qui va valider les champs, et selon le résultat soit tu affiches les erreurs retournées par la validation Symfo, soit tu affiches la suite du formulaire

En gros:

const form_data = { method: "post", body: {...}, headers: {...} } const response = await fetch("/api/validate_form/step_1", { form_data }).then(response => response.json()) if (response.status === 200) { // Le formulaire est valide // affiches la suite } elseif (response.status === 422) { // Le formulaire est invalide // affiches le/les messages d'erreurs } else { // Y a un soucis avec ton code console.log("Error !!", response.message) }

Et tu peux foutre ça dans une fonction pour l'utiliser pour faire une step 2, 3, 4, etc...

Et coté Symfony tu fais un controller qui retourne une reponse JSON