WEBVTT

NOTE Created by CaptionSync from Automatic Sync Technologies www.automaticsync.com

00:00:01.206 --> 00:00:04.476 align:middle
What if we wanted to add our own
fields to the registration form?

00:00:05.116 --> 00:00:07.886 align:middle
Like, what if we needed to
add a "First Name" field?

00:00:08.986 --> 00:00:09.696 align:middle
No problem!

00:00:10.256 --> 00:00:11.946 align:middle
Start in our User class.

00:00:13.356 --> 00:00:15.256 align:middle
This is a normal entity...

00:00:15.476 --> 00:00:19.306 align:middle
so we can add whatever fields we
want, like private $firstName.

00:00:19.386 --> 00:00:24.136 align:middle
I'll go to Code->Generate,
or Command+N on a Mac,

00:00:24.506 --> 00:00:27.836 align:middle
then select "ORM Annoations"
to annotate firstName.

00:00:29.906 --> 00:00:33.416 align:middle
Then I'll go back to Code->Generate
to add the getter and setter methods.

00:00:38.176 --> 00:00:42.016 align:middle
Notice, right now, firstName is not nullable...

00:00:42.306 --> 00:00:44.736 align:middle
meaning it's required in the database...

00:00:45.086 --> 00:00:45.836 align:middle
and that's fine!

00:00:46.356 --> 00:00:51.036 align:middle
If firstName is optional in your app,
you can of course add nullable=true.

00:00:52.146 --> 00:00:57.396 align:middle
I'm mentioning this for one reason: if
you add any required fields to your User,

00:00:57.546 --> 00:01:01.336 align:middle
the fos:user:create command
will no longer work...

00:01:01.776 --> 00:01:05.456 align:middle
because it will create a new User
but leave those fields blank.

00:01:06.296 --> 00:01:09.896 align:middle
I never use that command in production
anyways, but, you've been warned!

00:01:11.306 --> 00:01:14.056 align:middle
Move over to your terminal
to generate the migration:

00:01:14.366 --> 00:01:21.656 align:middle
php bin/console doctrine:migrations:diff
That looks right!

00:01:22.176 --> 00:01:30.316 align:middle
Run it: php bin/console
doctrine:migrations:migrate New field added!

00:01:31.686 --> 00:01:33.966 align:middle
Now, how can we add it to the form?

00:01:34.526 --> 00:01:42.246 align:middle
Simple! We can create our own new form class
and tell FOSUserBundle to use it instead.

00:01:45.136 --> 00:01:51.176 align:middle
In src/AppBundle, create a new Form directory
and a new class called RegistrationFormType.

00:01:55.106 --> 00:01:57.326 align:middle
Extend the normal AbstractType.

00:01:58.896 --> 00:02:04.526 align:middle
Then, I'll use Code->Generate Menu or
Command+N to override the buildForm() method.

00:02:06.656 --> 00:02:11.456 align:middle
Inside, just say $builder->add('firstName').

00:02:11.606 --> 00:02:16.726 align:middle
In a minute, we'll tell FOSUserBundle

00:02:16.766 --> 00:02:21.206 align:middle
to use this form instead of
its normal registration form.

00:02:22.206 --> 00:02:28.716 align:middle
But... instead of completely replacing
the default form, what I really want

00:02:28.716 --> 00:02:31.626 align:middle
to do is just add one field to it.

00:02:31.876 --> 00:02:35.456 align:middle
Is there a way to extend the existing form?

00:02:36.526 --> 00:02:40.776 align:middle
Totally! And once again, the web
debug toolbar can help us out.

00:02:42.006 --> 00:02:44.116 align:middle
Mouse over the form icon and click that.

00:02:45.496 --> 00:02:48.936 align:middle
This tells us what form is used on this page:

00:02:49.326 --> 00:02:52.736 align:middle
it's called RegistrationFormType
- the same as our form class!

00:02:54.076 --> 00:02:58.286 align:middle
To build on top of that form,
you don't actually extend it.

00:02:59.446 --> 00:03:02.936 align:middle
Instead, override a method called getParent().

00:03:04.786 --> 00:03:08.066 align:middle
Inside, we'll return the
class that we want to extend.

00:03:08.816 --> 00:03:13.646 align:middle
At the top, add use, autocomplete
RegistrationFormType from the bundle

00:03:14.716 --> 00:03:19.616 align:middle
and put as BaseRegistrationFormType
to avoid conflicting.

00:03:19.846 --> 00:03:27.946 align:middle
Now in getParent(), we can say return
BaseRegistrationFormType::class.

00:03:28.606 --> 00:03:30.676 align:middle
And that is it!

00:03:33.706 --> 00:03:37.506 align:middle
This form will have the existing
fields plus firstName.

00:03:39.806 --> 00:03:44.266 align:middle
To tell FOSUserBundle about our
form, we need to do two things.

00:03:44.826 --> 00:03:47.346 align:middle
First, register this as a service.

00:03:47.506 --> 00:03:54.336 align:middle
In my app/config/services.yml,
add app.form.registration

00:03:55.446 --> 00:03:58.266 align:middle
with class set to the RegistrationFormType.

00:04:00.256 --> 00:04:05.336 align:middle
It also needs to be tagged with name: form.type.

00:04:08.236 --> 00:04:13.106 align:middle
Finally, copy the class name and
go into app/config/config.yml.

00:04:14.346 --> 00:04:16.676 align:middle
This bundle has a lot of configuration.

00:04:17.136 --> 00:04:21.256 align:middle
And at the bottom of the documentation page,

00:04:21.566 --> 00:04:25.676 align:middle
you can find a reference called
FOSUserBundle Configuration Reference.

00:04:27.106 --> 00:04:28.326 align:middle
I'll open it in a new tab.

00:04:31.706 --> 00:04:36.396 align:middle
This is pretty awesome: a full dump
of all of the configuration options.

00:04:36.636 --> 00:04:41.246 align:middle
Some of these are explained in more
detail in other places in the docs,

00:04:41.626 --> 00:04:44.616 align:middle
but I love seeing everything
right in front of me.

00:04:45.446 --> 00:04:49.866 align:middle
And we can see what we're looking
for under registration.form.type.

00:04:53.356 --> 00:05:00.826 align:middle
Go back to your editor and add
those: registration, form and type.

00:05:02.336 --> 00:05:03.306 align:middle
Paste our class name!

00:05:04.236 --> 00:05:05.616 align:middle
And... we're done!

00:05:06.726 --> 00:05:08.736 align:middle
Go back to registration and refresh.

00:05:15.086 --> 00:05:16.016 align:middle
We got it!

00:05:17.056 --> 00:05:19.376 align:middle
And that will save when we submit.

00:05:20.516 --> 00:05:22.236 align:middle
Why is firstName at the bottom?

00:05:24.616 --> 00:05:26.276 align:middle
Well, remember inside

00:05:26.276 --> 00:05:32.446 align:middle
of register_content.html.twig,
we're using form_widget(form)...

00:05:32.446 --> 00:05:36.716 align:middle
which just dumps out the fields
in whatever order they were added.

00:05:38.196 --> 00:05:38.956 align:middle
Need more control?

00:05:39.816 --> 00:05:49.376 align:middle
Cool: remove that and instead use
form_row(form.email), form_row(form.username),

00:05:49.726 --> 00:05:56.856 align:middle
form_row(form.firstName) and
form_row(form.plainPassword).

00:05:58.446 --> 00:06:03.486 align:middle
If you're not sure what the field names are
called, again, use your web debug toolbar

00:06:03.486 --> 00:06:05.936 align:middle
for the form: it shows you everything.

00:06:09.936 --> 00:06:10.996 align:middle
Refresh that page!

00:06:12.276 --> 00:06:16.106 align:middle
Yes! First Name is exactly
where we want it to be.

00:06:17.976 --> 00:06:20.506 align:middle
Next, what about the username?

00:06:21.166 --> 00:06:25.206 align:middle
Could we remove that if our
app only needs an email?