---
title: 'Comment créer des formulaires dynamiques avec Symfony UX Live Components ?'
description: 'Composant live, ComponentWithFormTrait, validation en direct et collections de champs ajoutées à la volée : le guide des formulaires dynamiques avec Symfony UX Live Components.'
pubDate: 2025-01-16
updatedDate: 2026-10-04
family: 'php-symfony'
tags: []
heroImage: /images/comment-creer-des-formulaires-dynamiques-avec-symfony-ux-live-components.webp
videoUrl: 'https://youtu.be/wJ74zeujif0'
faq:
  - question: 'Live Components est-il toujours expérimental ?'
    answer: "Non. Le composant est stable depuis la version 2.33 : seuls des changements cassants annoncés sont livrés désormais. Le README GitHub qui porte encore la bannière « EXPERIMENTAL » n'est plus à jour."
  - question: 'Quelle version de PHP et de Symfony faut-il pour Live Components ?'
    answer: 'La branche 3.x demande PHP 8.4 au minimum et Symfony 7.4 ou supérieur. Sur une application plus ancienne, il faut rester sur la branche 2.x du paquet.'
  - question: 'Faut-il un jeton CSRF pour les actions Live Components ?'
    answer: "Non. La protection repose sur un en-tête Accept personnalisé et les politiques same-origin et CORS du navigateur ; l'argument csrf de AsLiveComponent a été retiré en 3.0. Évite en revanche un Access-Control-Allow-Origin à *."
  - question: 'Comment ajouter ou supprimer des lignes de formulaire dynamiquement ?'
    answer: 'Avec le type de champ LiveCollectionType et le trait LiveCollectionTrait, prévus pour gérer une collection de champs qui évolue côté navigateur.'
  - question: 'Peut-on valider un champ sans re-rendre tout le composant ?'
    answer: "Oui, le modificateur norender évite le re-rendu complet, et le debounce permet de temporiser l'appel pendant la saisie."
---

Symfony UX Live Components re-rend un composant Twig côté serveur à chaque interaction, sans que tu écrives une ligne de JavaScript. Le cas d'usage le plus courant est le formulaire qui change en fonction de ce que l'utilisateur vient de saisir : une liste déroulante qui révèle un second champ, une validation qui s'affiche pendant la frappe, une collection de lignes qu'on ajoute à la volée.

La vidéo en bas de page a été enregistrée sur la branche 2.x de Live Components : la syntaxe a changé depuis, et c'est la version actuelle qu'on utilise ici.

## Installer Live Components

```
composer require symfony/ux-live-component
```

Le paquet suit la même promesse de compatibilité que le framework Symfony, mais la branche 3.x a relevé ses prérequis : **PHP 8.4 et Symfony 7.4 au minimum**. Sur une application plus ancienne, il faut viser la branche 2.x, dont la syntaxe diffère légèrement.

La documentation officielle vit à l'adresse [symfony.com/bundles/ux-live-component](https://symfony.com/bundles/ux-live-component/current/index.html) : l'ancienne URL `/doc/current/ux/live_component.html` ne répond plus.

## Un composant live minimal

Un composant Twig devient live en remplaçant son attribut par `AsLiveComponent` et en ajoutant le trait `DefaultActionTrait` :

```
#[AsLiveComponent]
final class EditPost
{
    use DefaultActionTrait;
    use ComponentWithFormTrait;
}
```

Le template doit avoir **un unique élément racine**, sur lequel les attributs sont appliqués via `{{ attributes }}` : c'est ce point d'accroche qui initialise le contrôleur Stimulus du composant.

## Relier un champ au composant

Une propriété devient stateful avec l'attribut `LiveProp`. Elle est en lecture seule par défaut ; il faut `writable: true` pour que l'utilisateur puisse la modifier et déclencher un re-rendu :

```
#[LiveProp(writable: true)]
public string $query = '';
```

Côté template, `data-model` relie un champ à cette propriété. Les valeurs acceptées ne sont pas limitées au texte : scalaires, tableaux de scalaires, enums, `DateTime`, entités Doctrine et DTO passent aussi.

Live Components ajoute automatiquement un anti-rebond de 150 ms entre deux frappes, et expose des modificateurs utiles : `debounce(...)`, `on(change)`, `norender`, ainsi qu'une validation côté client avec `min_length`, `max_length`, `min_value` ou `max_value`.

## Le formulaire et sa validation

C'est le trait `ComponentWithFormTrait` qui fait le travail : ton composant doit implémenter `instantiateForm()` et le formulaire est ensuite disponible sous la variable `form` dans le template. Le trait expose une propriété `$formValues`, un `LiveProp` inscriptible qui contient la valeur de chaque champ.

À chaque changement de champ, le composant est re-rendu en soumettant le formulaire depuis `$formValues` : les erreurs de validation apparaissent donc en direct, sans aller-retour manuel.

La soumission se fait dans une action `LiveAction` avec `$this->submitForm()`. Si la validation échoue, une exception est levée et le composant re-rendu avec les erreurs ; tu peux aussi retourner une redirection.

## Les collections dynamiques

Pour ajouter et supprimer des lignes de formulaire, deux outils dédiés existent : le type de champ `LiveCollectionType` et le trait `LiveCollectionTrait`. C'est la réponse à la question « comment je fais un formulaire dont le nombre de champs change pendant la saisie ».

Une action personnalisée se déclare avec l'attribut `LiveAction` sur une méthode, et s'appelle depuis le template avec `data-action="live#action"` et `data-live-action-param="nomDeMethode"`. Ce sont de vrais contrôleurs : l'autowiring fonctionne, et les arguments se passent avec `LiveArg`.

## Ce qui a changé depuis la vidéo

Trois ruptures expliquent pourquoi du code trouvé en ligne ne fonctionne plus tel quel :

- **2.8** : les annotations laissent la place aux attributs PHP 8. `@LiveProp` devient `#[LiveProp]`, `@LiveAction` devient `#[LiveAction]`, et `LiveComponentInterface` disparaît.
- **2.33** : Live Components est déclaré stable, et `data-action-name` devient `data-live-action-param`.
- **3.0** : PHP 8.4 et Symfony 7.4 deviennent les minimums, et l'argument `csrf` de `AsLiveComponent` est supprimé.

Le [formulaire multi-étapes avec FormFlow](/blog/formflow-creer-des-formulaires-multi-etapes-avec-symfony/) est un bon complément si ton besoin est un parcours découpé en étapes plutôt qu'un formulaire qui réagit champ par champ.

## Questions fréquentes

**Live Components est-il toujours expérimental ?**

Non. Le composant est stable depuis la version 2.33 : seuls des changements cassants annoncés sont livrés désormais. Le README GitHub qui porte encore la bannière « EXPERIMENTAL » n'est plus à jour.

**Quelle version de PHP et de Symfony faut-il pour Live Components ?**

La branche 3.x demande PHP 8.4 au minimum et Symfony 7.4 ou supérieur. Sur une application plus ancienne, il faut rester sur la branche 2.x du paquet.

**Faut-il un jeton CSRF pour les actions Live Components ?**

Non. La protection repose sur un en-tête Accept personnalisé et les politiques same-origin et CORS du navigateur ; l'argument csrf de AsLiveComponent a été retiré en 3.0. Évite en revanche un Access-Control-Allow-Origin à *.

**Comment ajouter ou supprimer des lignes de formulaire dynamiquement ?**

Avec le type de champ LiveCollectionType et le trait LiveCollectionTrait, prévus pour gérer une collection de champs qui évolue côté navigateur.

**Peut-on valider un champ sans re-rendre tout le composant ?**

Oui, le modificateur norender évite le re-rendu complet, et le debounce permet de temporiser l'appel pendant la saisie.