So now that we have the structure created, what we'll do is we'll start with our address form and what
we'll do is we'll just go to our checkout address component, first of all.
Now, we've created the check out structure of our form in our check out component, and this is going
to be our parent component of the address component and what we'll do in here as an input property.
We're going to take the cheque out for.
So we'll say we'll call it check out form, and this is going to be a form group.
And make sure we've got input's in here brought in successfully and then we can go ahead and use this
in our address component TML.
So let's open the checkout address, age TML.
And what we'll do in here will say they've got empty dash forward to give it to give ourselves a bit
of margin and then we'll pass in the form group.
And this is going to be equal to the check out form.
And then in the next day of what we'll do, we'll just add a header and we'll also add a button on the
same row so that we can save the address as well.
And we'll use display flags to get the header.
Aligned correctly and add some spacing between the header and the baton.
So what would you say the flex and demo say justified dash content dash between.
And will also use a line items.
Dasch Center, and we just had an eight four and this is going to be the title is going to be Shipping
Address.
And this will just add a button.
And we'll give this a class of BTM B10 Dasch outline.
That's success.
And inside here will just say save as defaults, address and slimeballs, Steve will add our form.
So we'll say Dave, Dutrow.
And inside here, what we're going to do, we've got our form group for our check out form here, but
now we want to access our address form controls.
And the way that we do that is we specify form group name.
No control name this time, group name, because we want to get all of the fields in our address form,
so we'll specify address form, this needs to match the name that we've called inside the check out
component, but we don't get any Intellisense for this.
So make sure you're typing and spelling is accurate here.
And what we'll do, we'll put our text in place inside a form group class.
So we'll say div dot form dash group.
And we'll use column six so that they're all taking up half the width of the container.
And then inside here, we can add our app dash, text input's.
And app text experts take a label.
And we'll set this to in this case, it's going to be the first names without add single quotes and
then we'll specify first name.
And we also need to pass here the foam control name, and of course, this also needs to match exactly
what the property is called in our check out component, where we created the structure of the form.
And this is going to be first name for the first one.
And then we're going to use the copy and paste technique to create the rest of the inputs here, so
we'll just add this in five more times.
And Will.
Be kind of grateful that we don't have to do the full work on each of these experts for validation and
all of that stuff, we're getting that functionality now simply from the app text.
And we don't need to touch this.
It's just going to work.
And the second field is going to be last name.
The third field is going to be Street.
They fulfilled will be city.
The fifth will be states.
And the second will be zip code, so will you say zip and code and then we'll just update the form control
names.
So we'll have last name.
We'll have streets.
And please be careful with the spelling casing, just make it make sure is exactly the same as what
we've called these properties in our check out form here and then Mohave City.
And then we'll have St..
And then we'll add zip codes again, being careful that we spell it and case it exactly the same as
we used in our checkout component.
So let's go across to our browser and see if we can see our form inside our check out component, so
we'll proceed to check out and it doesn't look quite right.
We seem to be missing things.
And let's just check the console.
And see what kind of errors we've got here.
Hmm.
OK, so it's given us some problems and is looking for a reform group, for instance, and saying,
please pass in.
And whilst we did add the form group here, did we add it to our check out component e-mail so that
we could pass the form group to our checkout address component?
I think we missed that step.
So let's go to our check out component e-mail and we need to pass this the check out form as an input
property.
And it's simply called the check out form.
And let's go back to our components and see how this looks, so we'll go back to check out and now that's
more like it.
We could do with some padding or margin below the button.
But let's just check the functionality to make sure that we can type into the fields and we get the
validation to say it's successful.
And we also get the validation for each of the fields that are required as well.
And all we need to do is just add a small amount of margin underneath the button to get it away from
our input there.
So let's head back to our address component age HTML and we'll just add maybe dash three to give this
some margin and we'll go back.
And that looks a bit better, so we're not going to deal with form submission just yet.
Because we need to collect all of the information from this, so what we'll do next is we'll deal with
the delivery page or the delivery component and we'll take a look at that next.