Affichage du formulaire dans un template Twig

Pour afficher notre formulaire, il faut que notre contrôleur transmette un objet FormView à notre vue. En réalité, si nous utilisons la méthode render dans un contrôleur, Symfony se chargera automatiquement de créer l'objet :

public function index(Request $request, EntityManagerInterface $em): Response
{
  $newsletter = new Newsletter();
  $form = $this->createForm(NewsletterType::class, $newsletter);

  $form->handleRequest($request);

  if ($form->isSubmitted() && $form->isValid()) {
    $newsletter->setCreated(new DateTime());
    $em->persist($newsletter);
    $em->flush();
  }

+ return $this->render('newsletter/register.html.twig', [
+   'form' => $form
+ ]);
}

Ensuite, dans la vue, on peut afficher le formulaire avec les méthodes Twig disponibles.

La plus basique est la méthode form :

{{ form(form) }}

Cette méthode va simplement générer le code HTML pour tout le formulaire.

Si on veut avoir plus de contrôle sur la manière d'afficher notre formulaire, on peut utiliser les méthodes personnalisées également à disposition. Vous trouverez sur cette page toutes les méthodes d'extension Twig créées par Symfony pour afficher un libellé de champ, un champ seul, etc...ceci peut vous permettre d'avoir plus de contrôle sur la façon dont vous souhaitez afficher votre formulaire.

Appliquer un thème au formulaire

Bootstrap

On peut utiliser différents thèmes fournis par Symfony. Dans notre cas, si on utilise Bootstrap, on peut indiquer à Twig d'utiliser le thème correspondant.

Ainsi, dans la configuration du package Twig (config/packages/twig.yaml) :

config/packages/twig.yaml

twig:
  # ...
  form_themes: ["bootstrap_5_layout.html.twig"]

Avant l'application du thème :

Après l'application du thème :

Tailwind

Si on utilise Tailwind, on peut installer un bundle dédié :

composer require tales-from-a-dev/flowbite-bundle

On pourra ensuite le configurer à l'aide de la documentation.

Ajouter les templates du bundle dans la configuration Tailwind :

tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    // ici vvvv
    "./vendor/tales-from-a-dev/flowbite-bundle/templates/**/*.html.twig",
    "./assets/**/*.js",
    "./templates/**/*.html.twig",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};

Appliquer le thème :

config/packages/twig.yaml

twig:
  # ...
  form_themes:
    - "@TalesFromADevFlowbite/form/default.html.twig"

Avant l'application du thème :

Après l'application du thème :