This course will be retired on April 12, 2021.
Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
In this video we'll create our form layout for visitors to leave ratings and comments on our photos.
Augury Chrome Developer Tools Extension
Note: Once you have installed Augury, restart your browser to access Augury functionality.
Forms in Angular are not much
different from standard HTML
0:00
forms that you might be used to.
0:03
They all have the same paths.
0:05
Radio buttons, checkboxes, inputs,
text areas, dropdowns, and buttons.
0:07
Let's dive in.
0:11
In our application, the comments are
included as part of the entry component.
0:13
This is fine for our use case.
0:18
But, we should not include the comment
form as part of the entry component.
0:20
Let's create a separate component for
the comment form.
0:25
We'll do this in the entries,
0:28
entry directory,
where we'll create two new files.
0:30
entry-comment
0:34
-form.component.ts.
0:38
And then,
0:47
entry-comment-form.component.html.
0:49
We'll be adding this component to
the entry components soon enough.
0:58
In entry-comment-form.component.ts
1:04
we'll need to stub out
the skeleton of a component.
1:08
Import component.
1:11
From, angular/core.
1:19
Then create a class
1:24
EntryCommentFormComponents.
1:28
It doesn't have any properties yet.
1:36
Using the Component Decorator We'll
1:38
set the selector to
app-entry-comment-form,
1:44
And the components.html file.
1:58
Entry-comment-form.component.html.
2:06
Remember to export the class.
2:18
Now, open up the index.ts file
in the entries directory, and
2:25
export this new component.
2:30
Remember, we do this to make the component
available from the entries directory so
2:51
that the app module doesn't have to
dig through the whole directory path.
2:56
If we were to change this
directory structure in the future,
3:01
we'd only need to fix it in one place.
3:04
In appmodule.ts, we need to import
the EntryCommentFormComponent.
3:06
Then, we need to include it
in our declarations array.
3:14
Our new component is ready to use.
3:28
Let's add it to the entry component HTML
file so we can start building our format.
3:31
If you're not already running
the depth server, go ahead and
3:55
start it now using npm run serv.
3:59
Let's take a look at the browser.
4:01
And if we did everything right,
we shouldn't see anything in the console,
4:06
now let's go back to the entry
comment form.component.html.
4:11
We can start building our all form here.
4:15
We'll start off like any other HTML form,
with the form element.
4:26
We don't need to give it
any attributes for now.
4:30
Behind the scenes, Angular with
pick up on the form element and
4:33
apply the NG form directive, which is part
of the forms module we installed earlier.
4:37
Let's add a names input.
4:43
There is nothing specific to angular here.
4:55
Next, we'll add a text area for
incoming message.
4:59
And then a submit button.
5:34
Our fun won't work right now but
the basic layout is there.
5:50
You're doing great.
5:56
In the next video we'll connect the form
with the code behind the scenes using
5:57
two-way data binding.
6:01
You need to sign up for Treehouse in order to download course files.
Sign up