Chapters

13 Chapters | 1:00:24 |

01

Form Parts & Functions Reference

3:10
02

Form Rendering Functions

4:56
03

Form Variables are the Bomb

5:45
04

Pro Form Theming

5:37
05

Form Theming: Add an Error Icon

5:23
06

Complex Blocks & the parent() Function

5:32
07

Adding Form Field Help Text

2:42
08

Go Deeper: Vars, Twig merge & Form Functions

4:37
09

Form Options & Variables: Dream Team

5:15
10

Controlling Vars with finishView()

2:36
11

Form Type Extension Magic

5:31
12

Compound & Embedded Forms

3:03
13

Rendering Fields Manually

6:17

> Symfony 3 > Getting Crazy with Form Themes

Buy Access to Course

01.

Form Parts & Functions Reference

Autoplay

Yo peeps! It's time to jump into a topic that's actually, super fun! Yep, we're going to learn to bend Symfony forms to our will: controlling exactly how they render... and believe me, by the end of this course, you'll be able to render a field in whatever weird way you want to.

Grab the Course Code!

To make forms great again, let's code together! Download the code from this page and unzip it. Inside, you'll find a trusty start/ directory, which will hold the exact code that I already have here.

To get the project running, open the README.md file and follow all the amazing details there. The last step will be open a terminal, move into the project directory - mine is called aqua_note - and then start the built-in PHP web server with:

bin/console server:run

Find a browser and pull up the address - http://localhost:8000 - to find our awesome project: Aquanote!

For this tutorial, there's just one thing you need to know: our database has a genus table, which is a type of animal classification. That table holds a bunch of different types of sea animals. To manage this, we have an admin section: login with weaverryan+1@gmail.com and password iliketurtles.

The admin section lives at /admin/genus. Click edit and... here's our starting form!

Form Type Basics

And so far, our form has all the parts you'd expect: a form class: GenusFormType:

            Copy Code

                            Show All Lines

                        50 lines
            |
            src/AppBundle/Form/GenusFormType.php
        
                Show Lines

                                                    // ... lines 1 - 13
                            
            class GenusFormType extends AbstractType
        
            {
        
                public function buildForm(FormBuilderInterface $builder, array $options)
        
                {
        
                    $builder
        
                        ->add('name')
        
                        ->add('subFamily', EntityType::class, [
        
                            'placeholder' => 'Choose a Sub Family',
        
                            'class' => SubFamily::class,
        
                            'query_builder' => function(SubFamilyRepository $repo) {
        
                                return $repo->createAlphabeticalQueryBuilder();
        
                            }
        
                        ])
        
                        ->add('speciesCount')
        
                        ->add('funFact')
        
                        ->add('isPublished', ChoiceType::class, [
        
                            'choices' => [
        
                                'Yes' => true,
        
                                'No' => false,
        
                            ]
        
                        ])
        
                        ->add('firstDiscoveredAt', DateType::class, [
        
                            'widget' => 'single_text',
        
                            'attr' => ['class' => 'js-datepicker'],
        
                            'html5' => false,
        
                        ])
        
                    ;
        
                }
        
                public function configureOptions(OptionsResolver $resolver)
        
                {
        
                    $resolver->setDefaults([
        
                        'data_class' => 'AppBundle\Entity\Genus'
        
                    ]);
        
                }
        
            }

And a controller that builds the form and passes it into the template:

            Copy Code

                            Show All Lines

                        86 lines
            |
            src/AppBundle/Controller/Admin/GenusAdminController.php
        
                Show Lines

                                                    // ... lines 1 - 15
                            
            class GenusAdminController extends Controller
        
            {
        
                Show Lines

                                                    // ... lines 18 - 34
                            
                public function newAction(Request $request)
        
                {
        
                    $form = $this->createForm(GenusFormType::class);
        
                    // only handles data on POST
        
                    $form->handleRequest($request);
        
                    if ($form->isSubmitted() && $form->isValid()) {
        
                        $genus = $form->getData();
        
                        $em = $this->getDoctrine()->getManager();
        
                        $em->persist($genus);
        
                        $em->flush();
        
                        $this->addFlash(
        
                            'success',
        
                            sprintf('Genus created by you: %s!', $this->getUser()->getEmail())
        
                        );
        
                        return $this->redirectToRoute('admin_genus_list');
        
                    }
        
                    return $this->render('admin/genus/new.html.twig', [
        
                        'genusForm' => $form->createView()
        
                    ]);
        
                }
        
                Show Lines

                                                    // ... lines 60 - 85
                            
            }

This gives us a genusForm variable inside of new.html.twig:

            Copy Code

                        14 lines
            |
            app/Resources/views/admin/genus/new.html.twig
        
            {% extends 'admin/genus/formLayout.html.twig' %}
        
            {% block body %}
        
                <div class="container">
        
                    <div class="row">
        
                        <div class="col-xs-12">
        
                            <h1>New Genus</h1>
        
                            {{ include('admin/genus/_form.html.twig') }}
        
                        </div>
        
                    </div>
        
                </div>
        
            {% endblock %}

But the real work is done via an included template: _form.html.twig:

            Copy Code

                        13 lines
            |
            app/Resources/views/admin/genus/_form.html.twig
        
            {{ form_start(genusForm) }}
        
                {{ form_row(genusForm.name) }}
        
                {{ form_row(genusForm.subFamily) }}
        
                {{ form_row(genusForm.speciesCount, {
        
                    'label': 'Number of Species'
        
                }) }}
        
                {{ form_row(genusForm.funFact) }}
        
                {{ form_row(genusForm.isPublished) }}
        
                {{ form_row(genusForm.firstDiscoveredAt) }}
        
                <button type="submit" class="btn btn-primary" formnovalidate>Save</button>
        
            {{ form_end(genusForm) }}

Let's start there.

The Form Rendering Functions

The genusForm variable is an object, but you can't just print it. Instead, Symfony gives us a bunch of form functions: each renders a different part of the form.

To get all the deets, head to Symfony.com. Click into the Documentation and then find the Reference section. This holds a wonderful page called Twig Template Function and Variable Reference. This lists all the functions we'll be using and their arguments. Let's dive into these... and then, extend the heck out of them.

9 Comments

Sort By

RoyalShape 6 years ago

Is there a way I can use the course code in symfony 4 so I can go through the tutorial?

| Reply |

Victor SFCASTS RoyalShape 6 years ago

Hey Daniel,

We locked dependencies on Symfony 3.1 for this course, so if you want to code along with this tutorial - you have a few options:
- Download course code, go to the start/ directory and manually upgrade dependencies to Symfony 4.x - but most probably you will faced some BC breaks that you will need to fix;
- Or, start with the new symfony 4 project and copy/paste parts of codes from this tutorial to it, i.e. you'll need to migrate all the features we have on the beginning of this tutorial.

Probably, the first one is easier if you want to code along with us on our project. The 2nd option is good if you already have a Symfony 4 project and want to practice this course on it.

Well, there's the 3rd option, but you'd need to wait. We're going to release the same topic for Symfony 4 track, but I can't tell you any estimations for now, probably it can takes months.

Cheers!

| Reply |

somecallmetim 6 years ago

A Donald Trump reference? Really?

| Reply |

weaverryan SFCASTS somecallmetim 6 years ago

The forms are going to be HUUUUGE!

No political preference or allegiance in any direction intended - just having some fun :)

2 | Reply |

somecallmetim weaverryan 6 years ago

Lol. Well played

| Reply |

Mike P. 6 years ago

Whats the best practice naming convention for Form/* files?
Iam *confused*, some forms are named NAMEForm.php and some are NAMEFormType.php

When should I use *FormType.php and when Form.php?

| Reply |

MolloKhan SFCASTS Mike P. 6 years ago edited

Hey Mike P.!

That's a good question, I haven't found documentation about form naming standards, but here in Knp, we like to put inside "src/AcmeBundle/Form/Type/" all forms binded to an entity, and name them as "EntityNameType.php". If your form is not binded to an entity, then it can live at the root Form folder

I hope it helps you :)
Cheers!

| Reply |

Mike P. MolloKhan 6 years ago

Good answer thanks!
One question regarding it, you wrote: "we like to put inside "src/AcmeBundle/Form/Type/" all forms binded to an entity, and name them as "EntityNameType.php"."

So LoginForm and RegistrationForm are binded to the Entity User ('data_class' => User::class,) so they have to be in /Form/Type/LoginFormType.php and /Form/Type/UserRegistrationType.php as by this rule, do I understand that correctly?

| Reply |

MolloKhan SFCASTS Mike P. 6 years ago

Yes, exactly that!

Also, you could name your UserRegistrationType as RegistrationType, unless you have multiple registrations and need to be more specific.

| Reply |

This tutorial is built on Symfony 3 but form theming hasn't changed much in Symfony 4 and Symfony 5. Other than some path differences - this tutorial should work fine.

Symfony 3

What PHP libraries does this tutorial use?

// composer.json
{
    "require": {
        "php": "^7.1.3",
        "symfony/symfony": "3.4.*", // v3.4.49
        "doctrine/orm": "^2.5", // 2.7.5
        "doctrine/doctrine-bundle": "^1.6", // 1.12.13
        "doctrine/doctrine-cache-bundle": "^1.2", // 1.4.0
        "symfony/swiftmailer-bundle": "^2.3", // v2.6.7
        "symfony/monolog-bundle": "^2.8", // v2.12.1
        "symfony/polyfill-apcu": "^1.0", // v1.23.0
        "sensio/distribution-bundle": "^5.0", // v5.0.25
        "sensio/framework-extra-bundle": "^3.0.2", // v3.0.29
        "incenteev/composer-parameter-handler": "^2.0", // v2.1.4
        "composer/package-versions-deprecated": "^1.11", // 1.11.99.4
        "knplabs/knp-markdown-bundle": "^1.4", // 1.9.0
        "doctrine/doctrine-migrations-bundle": "^1.1", // v1.3.2
        "stof/doctrine-extensions-bundle": "^1.2" // v1.3.0
    },
    "require-dev": {
        "sensio/generator-bundle": "^3.0", // v3.1.7
        "symfony/phpunit-bridge": "^3.0", // v3.4.47
        "nelmio/alice": "^2.1", // v2.3.6
        "doctrine/doctrine-fixtures-bundle": "^2.3" // v2.4.1
    }
}

Next Chapter

Form Parts & Functions Reference

Share this awesome video!

Grab the Course Code!

Form Type Basics

The Form Rendering Functions

9 Comments

Delete comment?

What PHP libraries does this tutorial use?

Show Lines	// ... lines 1 - 13
	class GenusFormType extends AbstractType
	{
	public function buildForm(FormBuilderInterface $builder, array $options)
	{
	$builder
	->add('name')
	->add('subFamily', EntityType::class, [
	'placeholder' => 'Choose a Sub Family',
	'class' => SubFamily::class,
	'query_builder' => function(SubFamilyRepository $repo) {
	return $repo->createAlphabeticalQueryBuilder();
	}
	])
	->add('speciesCount')
	->add('funFact')
	->add('isPublished', ChoiceType::class, [
	'choices' => [
	'Yes' => true,
	'No' => false,
	]
	])
	->add('firstDiscoveredAt', DateType::class, [
	'widget' => 'single_text',
	'attr' => ['class' => 'js-datepicker'],
	'html5' => false,
	])
	;
	}

	public function configureOptions(OptionsResolver $resolver)
	{
	$resolver->setDefaults([
	'data_class' => 'AppBundle\Entity\Genus'
	]);
	}
	}

Show Lines	// ... lines 1 - 15
	class GenusAdminController extends Controller
	{
Show Lines	// ... lines 18 - 34
	public function newAction(Request $request)
	{
	$form = $this->createForm(GenusFormType::class);

	// only handles data on POST
	$form->handleRequest($request);
	if ($form->isSubmitted() && $form->isValid()) {
	$genus = $form->getData();

	$em = $this->getDoctrine()->getManager();
	$em->persist($genus);
	$em->flush();

	$this->addFlash(
	'success',
	sprintf('Genus created by you: %s!', $this->getUser()->getEmail())
	);

	return $this->redirectToRoute('admin_genus_list');
	}

	return $this->render('admin/genus/new.html.twig', [
	'genusForm' => $form->createView()
	]);
	}
Show Lines	// ... lines 60 - 85
	}

	{% extends 'admin/genus/formLayout.html.twig' %}

	{% block body %}
	<div class="container">
	<div class="row">
	<div class="col-xs-12">
	<h1>New Genus</h1>

	{{ include('admin/genus/_form.html.twig') }}
	</div>
	</div>
	</div>
	{% endblock %}

	{{ form_start(genusForm) }}
	{{ form_row(genusForm.name) }}
	{{ form_row(genusForm.subFamily) }}
	{{ form_row(genusForm.speciesCount, {
	'label': 'Number of Species'
	}) }}
	{{ form_row(genusForm.funFact) }}
	{{ form_row(genusForm.isPublished) }}
	{{ form_row(genusForm.firstDiscoveredAt) }}

	<button type="submit" class="btn btn-primary" formnovalidate>Save</button>
	{{ form_end(genusForm) }}