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
There are multiple ways of handling user input in Angular. In this video we'll add the NgForm Module to our photo component.
[MUSIC]
0:00
A common thing to do when building a web
application is collect data from users.
0:04
In this stage,
0:09
we'll add a font that will allow visitors
to leave comments on our photo entries.
0:10
There are two ways to
build forms in Angular.
0:15
Template Driven and Dynamic.
0:18
We'll be covering template
driven forms in this course.
0:21
If you're interested in
learning about dynamic forms,
0:24
I've provided a link to the documentation
in the teacher's notes.
0:27
Template driven forms are pretty
much what the name says.
0:31
You write your template the same
way you'd write any other template.
0:34
The only difference being is your
template would include a form element.
0:37
Angular's FormsModule introduces a number
of helpful services and directives for
0:41
handling two way data binding, change
tracking, validation, and error handling.
0:47
Let's install the FormsModule now.
0:52
On the command line, I will enter
0:54
npm install @angular/forms@2.4.2.
1:00
And then --save and -save exact.
1:07
Without the word and.
1:17
I always include the save flag to ensure
that the package gets included in
1:20
the package.json file.
1:24
Save exact is optional but
it's still good practice.
1:25
This is important when sharing
your project with a team.
1:28
Or using a continuous integration
service like Travis CI.
1:31
To make sure that the FormsModule gets
bundle with all of our other vendor
1:35
scripts, we'll import the module
in the vendor ts file.
1:38
We're ready to include
the FormsModule in our application.
1:46
Let's open up app.module.ts.
1:51
At the top of the file where
the other @angular imports are,
1:54
we will add a new line and
import FormsModule.
1:58
Just like what we did with the HttpModule
and the InMemoryWebApiModule,
2:21
we need to add the FormsModule
to the imports array.
2:26
So it's available to all of our
components in our application.
2:30
We're now ready to start using forms.
2:36
By including the FormsModule
in our application,
2:39
we can begin collecting
comments from our visitors.
2:42
In the next video,
we'll create a comment form.
2:45
You need to sign up for Treehouse in order to download course files.
Sign up