Een formulier maken

Het maken van een formulier

Formulieren kunnen op verschillende manieren worden gemaakt. Meestal maken ze deel uit van een CRUD-oplossing en zijn ze gekoppeld aan een Entity (of Model). In dat geval kun je met een Symfony-commando vrij makkelijk een nieuw formulier maken.

De basis van een formulier vind je in de map src/Form. Formulieren in Symfony zijn Type-classes en eindigen daarom altijd met het woord Type. Het maken van een formulier doe je met het Symfony-commando:

bash
symfony console make:form

Je kunt ook meteen de naam van de Type meegeven aan het commando. Doe je dit niet, dan zal er om gevraagd worden.

bash
# symfony console make:form UserType

 The name of Entity or fully qualified model class name that the new form will be bound to (empty for none):
 > User

 created: src/Form/UserType.php


  Success!


 Next: Add fields to your form and start using it.
 Find the documentation at https://symfony.com/doc/current/forms.html

Een leeg formulier maken

Je kunt ook een leeg formulier maken, bijvoorbeeld bij een contactpagina. Als je niets wilt opslaan maar de gebruiker en een ontvanger alleen wilt mailen, of als je een aantal zaken wilt combineren, laat je de vraag over de gekoppelde entity leeg:

The name of Entity or fully qualified model class name that the new form will be bound to (empty for none):

De verzendknop toevoegen

Als je het bestand opent (in de map src/Form), dan heb je een functie die buildForm heet. In deze functie heb je een $builder-variabele die standaard alle velden uit de database toevoegt. Deze velden komen ook zo terug als invoervelden in jouw formulier.

php
public function buildForm(FormBuilderInterface $builder, array $options): void
{
    $builder
        ->add('email')
        ->add('roles')
        ->add('password')
        ->add('name')
        ->add('date_of_birth')
    ;
}

Je kunt hier van alles aan toevoegen met de ->add('')-methode.

Om een verzendknop toe te voegen, doorloop je twee stappen.

Als eerste moet je de SubmitType toevoegen aan de use-space van het bestand:

php
use Symfony\Component\Form\Extension\Core\Type\SubmitType;

Daarna kun je onderaan (na het laatste veld, boven de punt-komma) het volgende toevoegen:

php
->add('submit', SubmitType::class, ['label' => 'Toevoegen'])

Er zitten drie onderdelen in de ->add('')-methode, gescheiden door een komma:

• 'submit' is de naam, die komt terug in het invoerveld
• SubmitType::class is de verwijzing wat voor invoerveld het is (in dit geval een submit)
• ['label' => 'Toevoegen'] zorgt er voor dat de naam/waarde van de knop van submit veranderd naar Toevoegen

Meer over deze opties vind je in de pagina over het aanpassen van formulieren.

Het formulier tonen

Om een formulier te tonen moet je twee stappen ondernemen:

• Het formulier in een Controller aanroepen
• Het formulier in een TWIG-bestand tonen

Het formulier aanroepen

Als eerste moet je de gemaakte FormType aanroepen in de use-space van de Controller en het is meteen ook handig om de EntityManager in de use-space te zetten. Deze hebben we bij het verwerken van het formulier nodig.

php
//use-space in de Controller
use App\Form\BookType;
use Doctrine\ORM\EntityManagerInterface;

Daarna kun je het formulier aanroepen in de functie met de code:

php
$form = $this->createForm(BookType::class);

De variabele van het formulier kun je vervolgens meegeven aan het TWIG-bestand.

php
return $this->render('book/add.html.twig', [
    'form' => $form
]);

De volledige code

php
//Use-space in de Controller
use App\Form\BookType;
use Doctrine\ORM\EntityManagerInterface;

//Functie om een boek toe te voegen verder op
public function add(Request $request, EntityManagerInterface $entityManager): Response
{
    $form = $this->createForm(BookType::class);

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

Het formulier tonen

Het tonen van het formulier in je TWIG-bestand is eenvoudig. Je hoeft alleen maar na de basis opmaak de volgende code toe te voegen:

twig
{{ form(form) }}

Aangepaste formulieren

Deze oplossing geeft een kaal/leeg formulier. Lees ook de paragraaf over aangepaste formulieren maken. Daarin leer je hoe een formulier er beter uit kan zien, hoe je velden aanpast en je ook bijvoorbeeld een Bootstrap-formulier kunt maken, of helemaal zelf kunt stijlen.