1
00:00:00,000 --> 00:00:04,979
[MUSIC]

2
00:00:04,979 --> 00:00:09,281
Let us know briefly value forms and
forms support in Angular.

3
00:00:09,281 --> 00:00:14,748
We have already seen the use of forms
in the previous bootstrap course and

4
00:00:14,748 --> 00:00:20,139
we have seen how bootstrap enables
us to style the standard HDMI forms.

5
00:00:20,139 --> 00:00:24,664
In this lesson, we're going to
look at Angular support for forms,

6
00:00:24,664 --> 00:00:30,200
two different kinds of forms,
template-driven forms and reactive forms.

7
00:00:30,200 --> 00:00:32,450
We'll look at the difference
between the two, and

8
00:00:32,450 --> 00:00:35,670
where each of them is suitable
within our Angular application.

9
00:00:35,670 --> 00:00:39,400
We'll look at the advantages and
disadvantages of each approach

10
00:00:39,400 --> 00:00:43,490
in more detail in this lesson and
the next lesson.

11
00:00:44,910 --> 00:00:50,880
Also, we will look at form validation,
how Angular supports form validation,

12
00:00:50,880 --> 00:00:55,600
and how we can carry out form
validation for our template driven form

13
00:00:55,600 --> 00:01:00,420
in the next lecture, after the exercise.

14
00:01:02,400 --> 00:01:06,867
We have already realized that forms
support a cohesive, effective and

15
00:01:06,867 --> 00:01:10,230
compelling data entry experience for
users.

16
00:01:10,230 --> 00:01:14,350
You see forms being used
everywhere on websites.

17
00:01:14,350 --> 00:01:14,940
For example,

18
00:01:14,940 --> 00:01:19,520
when you need to log into a website you
have to type in your user ID and password.

19
00:01:19,520 --> 00:01:22,210
Or when you need to submit information for
example.

20
00:01:22,210 --> 00:01:26,871
If you're booking a movie ticket,
or if you are placing

21
00:01:26,871 --> 00:01:32,027
an order in an online grocery store,
or many other use cases,

22
00:01:32,027 --> 00:01:37,482
forms are extensively used for
providing a comprehensive way for

23
00:01:37,482 --> 00:01:43,360
users to input information into
the websites or the web application.

24
00:01:43,360 --> 00:01:47,922
The Angular framework provides
comprehensive support for

25
00:01:47,922 --> 00:01:51,670
forms, including forms and
forms validation.

26
00:01:51,670 --> 00:01:57,379
This is where we take advantage of the
Angular support for two-way data binding

27
00:01:57,379 --> 00:02:03,690
and tracking changes that we make in the
form elements, and also form validation.

28
00:02:03,690 --> 00:02:07,030
So when you input data into
an input fields in your form,

29
00:02:07,030 --> 00:02:11,330
the data is automatically evaluated
with Angular support for forms.

30
00:02:11,330 --> 00:02:15,980
We'll look at some of these in more
detail as we go through the lessons.

31
00:02:15,980 --> 00:02:21,010
Let me quickly remind you
of HTML forms themselves.

32
00:02:21,010 --> 00:02:24,790
You already know that forms
are supported through the form

33
00:02:25,910 --> 00:02:28,200
element in your HTML page.

34
00:02:28,200 --> 00:02:32,734
Along with the form element, within
the form tag, you can also include things

35
00:02:32,734 --> 00:02:37,561
like <input>, <textarea>, <select>,
and <button>s, and many more.

36
00:02:37,561 --> 00:02:42,585
We will see how the Angular support
performs together with the HTML

37
00:02:42,585 --> 00:02:47,608
form elements, enable us to design
two different kinds of forms,

38
00:02:47,608 --> 00:02:52,292
template-driven forms and
also reactive forms in Angular.

39
00:02:52,292 --> 00:02:58,585
In this lesson, we will concentrate on
Angular support for template-driven forms.

40
00:02:58,585 --> 00:03:03,125
In a template-driven form, they will
use the Angular template together with

41
00:03:03,125 --> 00:03:07,250
the form elements that we have just
seen to be able to construct forms and

42
00:03:07,250 --> 00:03:10,646
make use of Angular support for
template-driven forms.

43
00:03:10,646 --> 00:03:15,432
And we will be able to bind the Angular
form specific directives to the form

44
00:03:15,432 --> 00:03:20,450
elements within our templates, and
then leverage the two-way data binding

45
00:03:20,450 --> 00:03:25,336
that also form validation and error
support that Angular provides for us.

46
00:03:25,336 --> 00:03:28,128
In the exercise that follows immediately,

47
00:03:28,128 --> 00:03:32,512
this lecture will look at how we
can design a template-driven form.

48
00:03:32,512 --> 00:03:37,164
In particular, we will also look
at how two-way data binding with

49
00:03:37,164 --> 00:03:41,986
Angular supports, using the ngModel
directive can be leveraged for

50
00:03:41,986 --> 00:03:44,894
tying in the information from your form to

51
00:03:44,894 --> 00:03:50,430
some JavaScript variables that
you declared within your classes.

52
00:03:50,430 --> 00:03:53,610
In the exercise that immediately
follows this lecture,

53
00:03:53,610 --> 00:03:56,960
we look at how we can design
a template-driven form.

54
00:03:56,960 --> 00:04:01,350
In particular, we will look at how two-way
data binding that Angular supports using

55
00:04:01,350 --> 00:04:06,280
the ngModel directive can be leveraged for
tying in the information from

56
00:04:06,280 --> 00:04:10,870
your form to some JavaScript variables
that you declare within your classes.

57
00:04:10,870 --> 00:04:14,860
And this is where the banana
in a box that we referred to

58
00:04:14,860 --> 00:04:19,140
earlier with the ngModel
directive comes to our aid.

59
00:04:19,140 --> 00:04:22,880
As we go through the exercises,
this'll become even more clear.

60
00:04:22,880 --> 00:04:27,139
Now let's learn how to leverage
the Angular support for

61
00:04:27,139 --> 00:04:32,585
template-driven forms in order to
design our forms in the exercises.

62
00:04:32,585 --> 00:04:36,014
[MUSIC]