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

2
00:00:04,438 --> 00:00:08,934
We just completed learning
about template driven forms in

3
00:00:08,934 --> 00:00:12,310
angular in the previous lesson.

4
00:00:12,310 --> 00:00:18,336
Angular also supports another way of
designing forms called as reactive forms,

5
00:00:18,336 --> 00:00:25,390
the reactive forms use the reactive style
of programming for supporting forms.

6
00:00:25,390 --> 00:00:28,050
We'll talk about reactive
programming briefly in

7
00:00:28,050 --> 00:00:31,110
one of the later lessons in this module.

8
00:00:31,110 --> 00:00:34,180
But right now,
we'll deal with reactive forms and

9
00:00:34,180 --> 00:00:38,410
see how we can design
reactive forms in angular and

10
00:00:38,410 --> 00:00:44,430
what are the unique features of doing
reactive forms in angular next.

11
00:00:46,150 --> 00:00:52,310
The reactive style of programming
advocates explicit management of

12
00:00:52,310 --> 00:00:58,500
data flowing between the non-UI
data model and the UI-oriented

13
00:00:58,500 --> 00:01:04,280
form model and this is the approach
that reactive forms take in Angular.

14
00:01:04,280 --> 00:01:09,240
Now that might not make much sense to you
at this moment but as we complete this

15
00:01:09,240 --> 00:01:14,860
exercise and the lecture,
it'll become even more clearer to you

16
00:01:14,860 --> 00:01:21,530
why the reactive approach suits that
form design in certain contexts.

17
00:01:21,530 --> 00:01:26,630
Now in the reactive approach,
we create a tree of angular

18
00:01:26,630 --> 00:01:30,810
form control objects,
within the component class.

19
00:01:30,810 --> 00:01:33,300
Now in the template driven forms
that you have seen earlier,

20
00:01:34,450 --> 00:01:38,870
we design the forms using
the HTML template approach, so

21
00:01:38,870 --> 00:01:44,075
all the form controls we're put into
that form in the HTML template and

22
00:01:44,075 --> 00:01:49,667
we're primarily manage data and
they we're tied into their

23
00:01:49,667 --> 00:01:55,770
component object through
the NG model directly.

24
00:01:55,770 --> 00:02:01,280
In this approach, we will create that
form structure in our component and

25
00:02:01,280 --> 00:02:06,220
then tie the form structure into
firm controls in our template, so

26
00:02:06,220 --> 00:02:10,860
we'll bind the form tree that we

27
00:02:10,860 --> 00:02:15,920
create within our component
class to the native form

28
00:02:15,920 --> 00:02:20,910
elements within our template file there.

29
00:02:20,910 --> 00:02:25,530
So, in this approach
the component class has immediate

30
00:02:25,530 --> 00:02:30,390
access to both the data model as well
as the form control structure and so

31
00:02:30,390 --> 00:02:36,575
we can then take the data model and push
it in to the form control structure and

32
00:02:36,575 --> 00:02:40,985
correspondingly take the information
out of the form control structure and

33
00:02:40,985 --> 00:02:43,355
then map it in to the data model.

34
00:02:43,355 --> 00:02:48,355
So the data model coming in from
the back end can be mapped in to form

35
00:02:48,355 --> 00:02:53,410
control structure which is reflected
in to the view through that template

36
00:02:54,550 --> 00:02:58,280
and the bridge between them is
done within the component class

37
00:02:58,280 --> 00:03:02,660
by creating the form structure
inside the component class.

38
00:03:02,660 --> 00:03:07,330
Now, this doesn't make a whole lot
of sense to you at this moment, but

39
00:03:07,330 --> 00:03:12,230
when we do the exercise, it will
become even clearer to you how this

40
00:03:12,230 --> 00:03:17,080
binding between the data model and the
firm control structure can be accomplished

41
00:03:17,080 --> 00:03:22,185
inside the component class in the type
script code of the components class.

42
00:03:22,185 --> 00:03:26,700
So this is where we will leverage
reactive patterns, testing and

43
00:03:26,700 --> 00:03:31,160
validation to great advantage,
so this reactive

44
00:03:31,160 --> 00:03:35,170
form approach supports reactive patterns
of programming, as I said, we'll talk

45
00:03:35,170 --> 00:03:39,880
more reactive reactive programming
a little bit later in this module.

46
00:03:40,900 --> 00:03:45,470
Also, the fact that we
create the forms in code

47
00:03:45,470 --> 00:03:50,840
means that testing and evaluation
of forms becomes a lot more easier.

48
00:03:50,840 --> 00:03:54,040
Template driven forms
are very hard to test

49
00:03:54,040 --> 00:03:58,770
because much of the structure
is in the template code, so

50
00:03:58,770 --> 00:04:03,800
the reactive approach lends itself
much better for unit testing and

51
00:04:03,800 --> 00:04:10,150
also for form validation as we'll see
a little bit later in the exercise.

52
00:04:10,150 --> 00:04:15,650
Let's briefly reflect on some of
the advantages of using reactive forms.

53
00:04:15,650 --> 00:04:20,820
One of the advantages is that
the values in the form that elements

54
00:04:20,820 --> 00:04:25,986
are immediately available and
synchronous with the abstract code.

55
00:04:25,986 --> 00:04:29,990
In template driven form
it takes on cycle for

56
00:04:29,990 --> 00:04:35,510
any changes written the template to
be reflected into your code there,

57
00:04:35,510 --> 00:04:40,990
but in the reactive approach,
the synchrony bit, the data and

58
00:04:40,990 --> 00:04:46,491
the view is tightly maintained.

59
00:04:46,491 --> 00:04:50,680
Second, the reactive forms,
as I already mentioned,

60
00:04:50,680 --> 00:04:55,560
are easier to do unit testing and
this becomes very crucial

61
00:04:55,560 --> 00:05:01,240
when you are designing a very
complex angle replications.

62
00:05:01,240 --> 00:05:04,320
The Reactive forms are supported to some

63
00:05:04,320 --> 00:05:08,240
classes that are available
to angular forms library.

64
00:05:08,240 --> 00:05:13,390
One of them is the FormControl class which
powers the individual form control is

65
00:05:13,390 --> 00:05:19,350
that we include in our form the individual
elements and also enables us to

66
00:05:19,350 --> 00:05:24,360
track the value of those limits and
do validation of those elements.

67
00:05:25,500 --> 00:05:29,110
The FormGroup is a group of FormControl,
so

68
00:05:29,110 --> 00:05:32,420
when you want to organize
FormControls together as a group and

69
00:05:32,420 --> 00:05:37,700
then track information about those
group as a whole, then the FormGroup

70
00:05:37,700 --> 00:05:43,240
enables you to agglomerate
a group of FormControls together.

71
00:05:44,780 --> 00:05:48,850
In addition, we also have an
AbstractControl class which is an abstract

72
00:05:48,850 --> 00:05:53,930
based class for FormControl classes,
which can also be used to our advantage

73
00:05:53,930 --> 00:05:58,500
although we want to see them
specifically in the exercise later on,

74
00:05:58,500 --> 00:06:02,630
but we will come back to
use them at a later time.

75
00:06:05,600 --> 00:06:10,430
And also we have a FormArray
class that enables you to define

76
00:06:10,430 --> 00:06:15,410
a numerically indexed array
of AbstractControl instances,

77
00:06:15,410 --> 00:06:19,460
again, both the AbstractControl and
the FormArray, we won't explicitly examine

78
00:06:19,460 --> 00:06:24,950
in this particular lesson, but
we will see them later on in the course.

79
00:06:24,950 --> 00:06:28,070
Another interesting
aspect of reactive forms

80
00:06:28,070 --> 00:06:29,950
is the availability of the FormBuilder.

81
00:06:29,950 --> 00:06:36,925
The FormBuilder class allows use to create
the forms within our TypeScript code and

82
00:06:36,925 --> 00:06:42,115
then be able to tie them up with
that template controls there.

83
00:06:42,115 --> 00:06:47,218
So to use the Form Builder Class you
import the Form Builder from the angular

84
00:06:47,218 --> 00:06:52,483
forms and then there after you can use
the Form builder to construct the form,

85
00:06:52,483 --> 00:06:57,424
like if you use and do which your Form
converter classes and the Form group

86
00:06:57,424 --> 00:07:03,040
classes as we have seen in the previous
slide that code is a bit more elaborate.

87
00:07:03,040 --> 00:07:08,180
But using the FormBuilder class, it
reduces the repetition inclitic of in your

88
00:07:08,180 --> 00:07:13,610
code and makes it a lot more compact for
defining fonts.

89
00:07:13,610 --> 00:07:16,440
We will use the FormBuilder
class as the approach for

90
00:07:16,440 --> 00:07:19,760
building forms in
the exercise that follows and

91
00:07:19,760 --> 00:07:26,170
this example is derived from the exercise
that you will do right after this lecture.

92
00:07:26,170 --> 00:07:31,320
So here you can see that we have built up
a form, as a group of these form control

93
00:07:31,320 --> 00:07:39,100
elements and each of them having specific
name and also the value given to them.

94
00:07:39,100 --> 00:07:43,540
By creating the form model
in our typescript code,

95
00:07:43,540 --> 00:07:48,030
you don't automatically populate the form
model, you need to exclusively populate

96
00:07:48,030 --> 00:07:51,190
the form model especially if you
get the data in a data model,

97
00:07:51,190 --> 00:07:55,280
then the data model needs to be mapped
into your form model to fill the values,

98
00:07:55,280 --> 00:08:00,580
so the form model and the data model
are kept separate in reactive forms.

99
00:08:00,580 --> 00:08:05,340
In the template driven forms you saw that
we we're directly trying into the data

100
00:08:05,340 --> 00:08:09,990
objects from the template
file to our abstract code.

101
00:08:09,990 --> 00:08:12,710
So in this case the form and
data model are kept separate, so

102
00:08:12,710 --> 00:08:17,610
any changes that you make to the DOM

103
00:08:17,610 --> 00:08:22,660
elements in your form will
flow into the form model and

104
00:08:22,660 --> 00:08:28,030
you have to explicitly
reflect the form data back to

105
00:08:28,030 --> 00:08:33,670
that data model even through a service or
whatever means that you choose,

106
00:08:33,670 --> 00:08:39,240
so this separation helps us to design our
code much better, as we will see later.

107
00:08:40,520 --> 00:08:45,490
Two methods are available for us to
populate a form model from a data model.

108
00:08:45,490 --> 00:08:50,280
We have the setValue() method, which
enables us to assign every form control

109
00:08:50,280 --> 00:08:54,710
to a particular value from the data
model or we have a patchValue(),

110
00:08:54,710 --> 00:08:59,360
which enables you to update only some
controls within your form model.

111
00:08:59,360 --> 00:09:02,970
So once you get the data model from
the back end, from the data model,

112
00:09:02,970 --> 00:09:08,030
you can patch in the values into your
form model or map the values from

113
00:09:08,030 --> 00:09:13,130
your data model into your form model,
very often, we will create the data model,

114
00:09:13,130 --> 00:09:18,740
which reasonably closely mirrors
the structure of the form.

115
00:09:18,740 --> 00:09:22,060
In the exercise that follows you
would see that I have a data model

116
00:09:22,060 --> 00:09:24,210
which is based upon a class,

117
00:09:24,210 --> 00:09:30,030
which mirrors very closely the form model
that we use within our example there.

118
00:09:31,740 --> 00:09:38,263
With this quick understanding of reactive
forms, let's now proceed to the exercise

119
00:09:38,263 --> 00:09:43,880
where we will double up a reactive form
within our angular application and

120
00:09:43,880 --> 00:09:47,958
along the way consolidate
some of the terminology and

121
00:09:47,958 --> 00:09:52,866
also some of the ideas that we
have just explored in this lesson.

122
00:09:52,866 --> 00:09:59,009
[MUSIC]