[MUSIC]
Let us know briefly value forms and forms support in Angular.
We have already seen the use of forms in the previous bootstrap course and
we have seen how bootstrap enables us to style the standard HDMI forms.
In this lesson, we're going to look at Angular support for forms,
two different kinds of forms, template-driven forms and reactive forms.
We'll look at the difference between the two, and
where each of them is suitable within our Angular application.
We'll look at the advantages and disadvantages of each approach
in more detail in this lesson and the next lesson.
Also, we will look at form validation, how Angular supports form validation,
and how we can carry out form validation for our template driven form
in the next lecture, after the exercise.
We have already realized that forms support a cohesive, effective and
compelling data entry experience for users.
You see forms being used everywhere on websites.
For example,
when you need to log into a website you have to type in your user ID and password.
Or when you need to submit information for example.
If you're booking a movie ticket, or if you are placing
an order in an online grocery store, or many other use cases,
forms are extensively used for providing a comprehensive way for
users to input information into the websites or the web application.
The Angular framework provides comprehensive support for
forms, including forms and forms validation.
This is where we take advantage of the Angular support for two-way data binding
and tracking changes that we make in the form elements, and also form validation.
So when you input data into an input fields in your form,
the data is automatically evaluated with Angular support for forms.
We'll look at some of these in more detail as we go through the lessons.
Let me quickly remind you of HTML forms themselves.
You already know that forms are supported through the form
element in your HTML page.
Along with the form element, within the form tag, you can also include things
like , , , and s, and many more.
We will see how the Angular support performs together with the HTML
form elements, enable us to design two different kinds of forms,
template-driven forms and also reactive forms in Angular.
In this lesson, we will concentrate on Angular support for template-driven forms.
In a template-driven form, they will use the Angular template together with
the form elements that we have just seen to be able to construct forms and
make use of Angular support for template-driven forms.
And we will be able to bind the Angular form specific directives to the form
elements within our templates, and then leverage the two-way data binding
that also form validation and error support that Angular provides for us.
In the exercise that follows immediately,
this lecture will look at how we can design a template-driven form.
In particular, we will also look at how two-way data binding with
Angular supports, using the ngModel directive can be leveraged for
tying in the information from your form to
some JavaScript variables that you declared within your classes.
In the exercise that immediately follows this lecture,
we look at how we can design a template-driven form.
In particular, we will look at how two-way data binding that Angular supports using
the ngModel directive can be leveraged for tying in the information from
your form to some JavaScript variables that you declare within your classes.
And this is where the banana in a box that we referred to
earlier with the ngModel directive comes to our aid.
As we go through the exercises, this'll become even more clear.
Now let's learn how to leverage the Angular support for
template-driven forms in order to design our forms in the exercises.
[MUSIC]