So next on the list is to create the form that we need for our checkout's and we effectively need three
forms here we need to formally address.
We're going to have a form for our delivery, even though it's just going to be a radio button while
I select which one will still need a form.
Phyllis, the review is just going to be displaying the list of items, the quantity, etc., inside
their baskets, and then the payment is going to have a payment form.
But we're going to defer this one until the next section when we start looking at payments.
For now, we're just going to focus on these first three times.
And what we'll do is we'll create the form structure that we need to achieve this.
So we'll head back to the passcode.
And inside our check out component's, what we're going to use here is a reactive form, of course,
that's what we used before and we'll call it check out form.
And this is going to be a form group.
And make sure we have angular forms inside here.
Now, we already have this available via our shared module.
We've got our reactive forms module inside there being exported and we have inside our checkout module.
The shared model inside here.
And I've got a complaint in here about a maximum langue length, but it's give me a complaint and then
it's not reformatting it to what it wants, so I'll just manually drop these down.
Or at least once, so I remove the complaints and we'll go back to check out components so we know we
have access to reactive forms and we usually form builder fillers and the injection, Phyllis will say
private F.P. and the form builder.
And will add a method to create the checkout form, so we'll say create checkout form.
And we'll say, let's check out form is equal to Listo F.P. group.
And inside here, we're going to have we can have formed groups inside form groups, and that's exactly
what we're going to do.
So we're going to have a form group for our address.
So we call this address form.
And we're going to set this equal to or we're going to set this as this dot fb dot group and then inside
this form group we're going to add.
Are different fields for our address, so one of them is going to be first name.
And just like any other form, we'll just give it now as its initial value and we'll say validators
not required.
And we'll do the same for each of the other elements in our form, so let's just copy this down a few
times will change first name to last name.
We'll change the next one to St..
The fourth one, obesity.
And then we'll have states and then we'll have a zip code.
And we want these all to be required, so that's fine and blow our dress form without a comma.
And then we'll have a delivery for.
And again, we'll say Listo FP Group.
And inside here, all we can do is get our delivery method, so say delivery method.
And this is going to be set to NUL and we'll say validators required.
And in the third form, this is going to be our payment form.
I said we were going to defer this, but since we're here, what we'll do, we'll say, let's start
FP Group.
And inside here, the only information we're going to take is the name on card.
And will set list now and will say validators required.
And this is our form, a structure set up for three different forms, and what we'll be able to do is
access each of these forms individually.
We can validate each of these forms individually, and we can also validate the form as a whole.
And we'll be able to get the information we need and get this information that we're collecting.
But we need to pass to our API in order to create the order.
And of course, before I forget, let's go in at this and say let's check out form or more accurately,
let's create check out for.
And what we'll do next is, well, we'll start by creating the address form and we'll look at that next.