Discussion :

[blugeen]

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.

[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.

[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.

[arnooo999]

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 :

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
 
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

[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.

[blugeen]

Merci de vos réponses !

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

Code :

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

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 ?

[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'.

[blugeen]

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

Dans le FormType :

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
 
->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 :

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

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 :

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

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

Et dans script.js (en jquery) :

Code :

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

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 !