Formulieren met keuzemenu

Soms heb je een keuze

Er zijn momenten waarop gebruikers een keuze hebben bij het invullen van een formulier in jouw applicatie, dan heb je de ChoiceType optie in een formulier.
In onderstaand voorbeeld heb je een bestelformulier waarbij het product in de Controller al bekend is, in dit geval een pizza, maar je kan nog wel de grote kiezen. De gekozen grote is een string of varchar in de database, we slaan alleen de naam op van de gekozen grote. Maar de gebruiker krijgt drie keuzes, small, regular (deze kost 2 Euro extra) en large (deze kost 4 Euro extra).

Het standaard formulier

Als je een formulier maakt met symfony console make:form zal het veld size een TextType geven en geen ChoiceType. Het standaard formulier met submit-button zal er dan zo uitzien:

    public function buildForm(FormBuilderInterface $builder, array $options): void
{
    $builder
        ->add('firstname')
        ->add('lastname')
        ->add('address')
        ->add('size')
        ->add('submit', SubmitType::class, ['label' => 'Bestel deze pizza'])
    ;
}

Een standaard formulier zonder keuze, met submit button

We gaan natuurlijk dit sowieso niet gebruiken, we passen de labels-toe om het wat mooier te maken:

    public function buildForm(FormBuilderInterface $builder, array $options): void
    {
        $builder
            ->add('firstname', null, ['label' => 'Wat is je voornaam?'])
            ->add('lastname', null, ['label' => 'Wat is je achternaam?'])
            ->add('address', null, ['label' => 'Wat is je adres?'])
            ->add('size', null, ['label' => 'Hoe groot wil jij jouw pizza?'])
            ->add('submit', SubmitType::class, ['label' => 'Bestel deze pizza'])
        ;
    }

Het formulier met nette labels

Bovenstaand voorbeeld heb je al een mooier formulier welke we kunnen gebruiken. Maar de grote van de pizza het size veld is nu wel opgemaakt, maar nog geen keuze menu. We gaan daarvoor de null in de ->add('size', null, ['label' => 'Hoe groot wil jij jouw pizza']) vervangen door een ChoiceType.
Als eerste moet je in de use-space van het bestand de volgende regel toe voegen:
use Symfony\Component\Form\Extension\Core\Type\ChoiceType;
Dit zorgt ervoor dat je de ChoiceType ook kan gebruiken.

Opties van de ChoiceType

Als je een ChoiceType wilt gebruiken moet je ook de keuzes meegeven in het derde argument van de ->add() methode.

public function buildForm(FormBuilderInterface $builder, array $options): void
{
    $builder
        ->add('firstname', null, ['label' => 'Wat is je voornaam?'])
        ->add('lastname', null, ['label' => 'Wat is je achternaam?'])
        ->add('address', null, ['label' => 'Wat is je adres?'])
        ->add('size', ChoiceType::class, ['label' => 'Kies je maar',
            'choices' => [
                'Groot +4 Euro' => 'large',
                'Normaal +2 Euro' => 'regular',
                'Klein' => 'small',
            ],
        ])
        ->add('submit', SubmitType::class, ['label' => 'Bestel deze pizza'])
    ;
}

Formulier met 3 keuzes

De choices key heeft als waarde weer een array met daarin de naam die getoond wordt in het <option> element van het select element welke aangemaakt wordt. De waarde van de array is vervolgens de value van het <option> element. Bovenstaande zal dus een select element geven:

Een standaard waarde meegeven

Net als bij een TextType kan je ook een standaard waarde meegeven die standaard dan geselecteerd zal zijn. Stel voor dat ik altijd een normale pizza wil laten bestellen en gebruikers de keuze voor groot en klein laten maken. Dan kan je met de data key dit aan de array ook weer meegeven.

//In de use-space zet je de volgende regels
use Symfony\Component\Form\Extension\Core\Type\SubmitType;
use Symfony\Component\Form\Extension\Core\Type\ChoiceType;

//De class OrderType
public function buildForm(FormBuilderInterface $builder, array $options): void
{
    $builder
        ->add('firstname', null, ['label' => 'Wat is je voornaam?'])
        ->add('lastname', null, ['label' => 'Wat is je achternaam?'])
        ->add('address', null, ['label' => 'Wat is je adres?'])
        ->add('size', ChoiceType::class, ['label' => 'Kies je maar',
            'choices' => [
                'Groot +4 Euro' => 'large',
                'Normaal +2 Euro' => 'regular',
                'Klein' => 'small',
            ],
            'data' => 'regular',
        ])
        ->add('submit', SubmitType::class, ['label' => 'Bestel deze pizza'])
    ;
}

Formulier met 3 keuzes en standaard regular gekozen

Dit geeft het volgende select-element: