Un formulaire dynamique

Version imprimable

01/07/2013, 20h44
blugeen

Un formulaire dynamique

Bonjour,

Dans le cadre d'un projet sous Symfony 2.3.1, je cherche à créer un formulaire dynamique.

j'ai un champ "constructeur" de type "choice" qui contient plusieurs options. J'aimerais que lorsque l'utilisateur sélectionne l'option "autre", un nouveau champ "précisez" apparaisse. Lors de l'envoi du formulaire, l'idée est que le contenu du champ "précisez" remplisse la colonne "constructeur" de la base de donnée à la place du champ de type "choice" qui, lui, doit donc être ignoré.

Avec PHP + Jquery il n'y a aucun problème, mais sous Symfony2 je ne vois pas du tout comment faire ! Je sais comment ajouter un champ dynamiquement avec les form events mais ça s'arrête là. Une idée ?

Merci d'avance.
02/07/2013, 08h55
Nico_F

Il n'y a pas de raison majeure pour que le mode de fonctionnement soit différent.

Ton formulaire contient tous les champs y compris le "précisez".
Dans ta vue tu masques ce champs en css, et tu fais un evènement jQuery qui le montre lorsqu'un changement se fait sur ta choiceList et que la valeur est à 'Autre'.

Coté traitement du formulaire tu vérifies juste la valeur de ce champ pour savoir si tu prends la valeur de la choiceList ou de l'autre champ.
02/07/2013, 12h39
blugeen

Je comprend bien ce que tu me dis, mais le problème c'est que je ne vois pas comment indiquer à Symfony qu'il faut utiliser la valeur d'un des deux champs pour hydrater la bonne colonne.

Bonjour,

Tu pourrais faire comme cela
disons que tu geres des catégories et que tu veux soit en choisir une, soit en ajouter une

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
 
class CategoryChoiceOrCreateType extends AbstractType
{
 public function buildForm(FormBuilderInterface $builder,$options){
        //choix d'une category existante
        $this->add('category_choice','entity',array('class'=>'Category');
        //création d'une nouvelle catégorie
       $this->add('category_create','text');
       //par défaut ce formType va renvoyer un tableau avec un index 'category_choice' (c-a-d une entité category) et un index 'category_create' (texte)
//dans le DataTransformer, on va analyser les deux valeurs pour savoir laquel utiliser
        $transformer=new MyCategoryTransformer(); 
       $this->addModelTransformer($transformer);
 
 }
public function setDefaultOption(OptionsResolverInterface $resolver){
$resolver->setDefaults(array(
            'data_class' => 'Category',
        ));
}
 
}

voir la doc sur les data transformers :http://symfony.com/doc/current/cookb...nsformers.html

02/07/2013, 14h33
Nico_F

Si tes deux champs doivent remplir la même colonne en base, il est sans doute plus judicieux de passer par un data transformer en effet. Je pensais qu'un champ supplémentaire 'précisez" existait en bdd, auquel cas la seule vérification à faire aurait été d'éviter le cas ou 'constructeur' a pour valeur autre chose que 'autre', et ou le champ 'précisez' n'est pas vide.

Merci de vos réponses !

Avant de regarder du côté des data transformers, j'ai tenté ceci dans mon FormType :
Code:

1 2 3 4 5 6 7 8 $builder->addEventListener( FormEvents::PRE_BIND, function(FormEvent $event){ $data = $event->getData(); $data['constructeur'] = $data['precisez']; $event->setData($data); } );
Avec ceci, si je rentre dans le champ "précisez" un constructeur existant dans le champ de type choice, ça fonctionne et me remplace bien la valeur. Mais si je rentre une autre valeur, le texte "Cette valeur n'est pas valide." s'affiche dans le formulaire.

Est-ce une bonne piste et avez-vous une idée de comment éviter ce message ?

03/07/2013, 08h56
Nico_F

Le souci c'est que là tu agis avant la validation, du coup tu vas insérer une valeur pour ce champ qui ne fait pas partie de la selectbox au départ, et de ce fait prendre une erreur de validation.

Si tu veux aller jusqu'au bout de cette méthode c'est plutôt au moment du pre-persist qu'il faudrait le faire, pas au pre-bind. En n'oubliant pas la condition de ne l'appliquer que si la valeur de "constructeur" est à 'autre'.

Merci à tous de votre aide ! j'ai résolu le problème de la manière suivante :

Dans le FormType :

Code:

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
 
->add('constructeur_choice',	 'choice', 	array(
		'choices'   => array(
			'01'              => '01',
			'02'          => '02',
			'autre'              => 'autre'
			),
		'required'  => true,
		'mapped'    => false,
		'label'     => 'Constructeur'
	)
)
->add('precisez',	 'text',  array(
		"mapped"   => false,
		"required" => false)
)
->add('constructeur',	 'hidden',  array(
		"required" => false)
)
 
//...
 
$builder->addEventListener(
            FormEvents::PRE_BIND,
            function(FormEvent $event){
		$data = $event->getData();
		if ( $data['constructeur_choice'] == 'autre'){
			$data['constructeur'] = $data['precisez'];
		}
		else{
			$data['constructeur'] = $data['constructeur_choice'];
		}
		$event->setData($data);
            }
);

Dans form.htm.twig :

Code:

1
2
3
4
5
6
7
8
9
 
<form method="post" {{ form_enctype(form) }}>
	<div class="precisez">
            {{ form_label(form.precisez, "Précisez") }}
            {{ form_widget(form.precisez) }}
        </div>
	{{ form_widget(form) }}
	<input type="submit" />
</form>

Dans style.css :

Code:

1
2
3
4
 
.precisez{
	display:none;
}

Et dans script.js (en jquery) :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
 
$("#gam_fichebundle_formtype_constructeur_choice").change(function() {
    var $selectValue = $(this).val();
	if ( $selectValue == 'autre'){
		$(".precisez").css("display","block");
		$("#gam_fichebundle_formtype_precisez").attr('required', true);
	}
	else{
		$(".precisez").css("display","none");
		$("#gam_fichebundle_formtype_precisez").attr('required', false);
	}
});

Et voilà tout fonctionne correctement !