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

2
00:00:04,598 --> 00:00:10,170
Time to move on to the third
assignment in this course.

3
00:00:10,170 --> 00:00:13,410
In this assignment,
as you might have already expected,

4
00:00:13,410 --> 00:00:17,190
we will be looking at Angular forms and
observables.

5
00:00:17,190 --> 00:00:22,480
That is what we learnt i n this
particular module of the course.

6
00:00:22,480 --> 00:00:28,600
In this assignment,
you will be designing a form

7
00:00:28,600 --> 00:00:33,440
within the dish detail
components view that will enable

8
00:00:33,440 --> 00:00:38,540
the users to submit their
comment about a specific dish.

9
00:00:39,640 --> 00:00:45,504
You will be using Angular reactive
forms to design the form and

10
00:00:45,504 --> 00:00:50,127
you will be using the value
changes observable in

11
00:00:50,127 --> 00:00:53,623
order to initiate form validation,

12
00:00:53,623 --> 00:00:59,147
just like we did in the exercise
that you just completed and

13
00:00:59,147 --> 00:01:04,109
you will use a new Angular
material component called

14
00:01:04,109 --> 00:01:07,747
Angular Material Slider Component.

15
00:01:07,747 --> 00:01:13,987
The slider component will be
used to input the rating for

16
00:01:13,987 --> 00:01:19,050
the dish by the person
who submits the count.

17
00:01:20,230 --> 00:01:24,620
Let's look at the three tasks in this
assignment in a bit more detail.

18
00:01:26,410 --> 00:01:31,760
So here, I am showing you their
first dish from the menu in order

19
00:01:31,760 --> 00:01:38,510
to illustrate to you the three tasks that
need to be completed in this assignment.

20
00:01:38,510 --> 00:01:43,238
So in this assignment,
we will create a form in

21
00:01:43,238 --> 00:01:48,594
the comment section of your
dish detail component.

22
00:01:48,594 --> 00:01:51,579
The form contains two fields here.

23
00:01:51,579 --> 00:01:55,122
The name field and a comment field.

24
00:01:55,122 --> 00:02:00,570
In the name field, the author's name for
the comment will be entered by the user.

25
00:02:00,570 --> 00:02:04,406
Then in their comment field
which is a text area,

26
00:02:04,406 --> 00:02:10,037
you will allow the author to enter
the comment that they want to submit.

27
00:02:10,037 --> 00:02:14,639
In addition,
in order to get the rating for the dish,

28
00:02:14,639 --> 00:02:22,010
we will use this Angular material
component called angular material slider.

29
00:02:22,010 --> 00:02:23,730
For this slider component,

30
00:02:25,040 --> 00:02:30,260
a link to the documentation is
provided in the additional resources.

31
00:02:30,260 --> 00:02:33,541
The slider component is fairly
straightforward to create.

32
00:02:33,541 --> 00:02:38,788
For this slider component,
you will display the tick marks like this.

33
00:02:38,788 --> 00:02:43,033
So you can see that you have one, two,
three, four tick marks already and

34
00:02:43,033 --> 00:02:46,300
the fifth one is right
under this thumb here.

35
00:02:46,300 --> 00:02:49,943
So and also when you show the thumb view,

36
00:02:49,943 --> 00:02:54,346
it will show the cut in
selected rating like the.

37
00:02:59,650 --> 00:03:06,047
So, this have to be labelled in Angular
slide of component that you include

38
00:03:06,047 --> 00:03:12,252
into their font and this will allow
you to select the rating for the dish.

39
00:03:12,252 --> 00:03:15,820
So, this is your first
task in this assignment.

40
00:03:16,880 --> 00:03:22,530
Your second task is to add
form validation for this form.

41
00:03:22,530 --> 00:03:28,589
Now this form should be created
using Angular reactive fonts and

42
00:03:28,589 --> 00:03:34,200
also using the value changes
observable in order to observe

43
00:03:34,200 --> 00:03:39,377
any changes to any of these
form control elements her.

44
00:03:39,377 --> 00:03:44,226
And whenever any change occurs,
you should immediately initiate form

45
00:03:44,226 --> 00:03:48,831
validation using the value changes
observable just the way we did in

46
00:03:48,831 --> 00:03:52,730
the exercise you just completed
in the previous lesson.

47
00:03:54,650 --> 00:03:59,370
Now, the validation that you need to
perform is that both the name and

48
00:03:59,370 --> 00:04:02,020
the comment are required fields.

49
00:04:02,020 --> 00:04:06,029
Furthermore, the name should
contain at least two characters.

50
00:04:06,029 --> 00:04:11,671
So if I just type in one character, then
you should show a message here saying,

51
00:04:11,671 --> 00:04:15,283
Author Name must be at
least two characters long.

52
00:04:15,283 --> 00:04:19,250
Now if of course, we type in more,
then that will disappear.

53
00:04:19,250 --> 00:04:23,494
If you remove the name
completely from the field,

54
00:04:23,494 --> 00:04:28,760
then you display a message saying,
Author Name is required.

55
00:04:28,760 --> 00:04:31,985
So, the required message
should be displayed here.

56
00:04:31,985 --> 00:04:35,327
So as soon as I type in
at least two characters,

57
00:04:35,327 --> 00:04:38,610
then the message will disappear.

58
00:04:38,610 --> 00:04:42,051
Now for the comment field also,
this is a required field.

59
00:04:42,051 --> 00:04:46,029
So, you need to type in at
least a few characters.

60
00:04:46,029 --> 00:04:49,159
There is no restriction on
the number of characters.

61
00:04:49,159 --> 00:04:54,586
But if no characters are typed in
when you display message here saying,

62
00:04:54,586 --> 00:04:56,980
comment as required.

63
00:04:56,980 --> 00:05:02,966
If your form is currently invalid,
then your submit button will not work.

64
00:05:02,966 --> 00:05:08,006
But once your form becomes valid,
then your submit button will work and

65
00:05:08,006 --> 00:05:10,707
should enable you to submit the font.

66
00:05:10,707 --> 00:05:15,160
So, that is the second
task in your assignment.

67
00:05:16,170 --> 00:05:23,060
The tough task in your assignment is that
as soon as the form has valid information,

68
00:05:23,060 --> 00:05:28,240
you should display a preview of what
you have just submitted in the form.

69
00:05:28,240 --> 00:05:33,310
Let me type in something more
meaningful here, so that they're

70
00:05:33,310 --> 00:05:38,460
preview looks interesting.

71
00:05:38,460 --> 00:05:43,550
So you see that as soon as you type
in valid information into your form,

72
00:05:43,550 --> 00:05:48,440
you should show a preview
of what the comment will

73
00:05:48,440 --> 00:05:53,210
look like if it gets added into
that list of comments for the dish.

74
00:05:53,210 --> 00:05:57,712
Now notice that in the preview,
you don't have the date displayed yet.

75
00:05:57,712 --> 00:06:01,046
So, that is another thing that
you need to keep in mind.

76
00:06:01,046 --> 00:06:08,027
If the form becomes invalid,
then the preview disappears.

77
00:06:08,027 --> 00:06:13,020
But as soon as the form becomes valid,
the preview will reappear.

78
00:06:13,020 --> 00:06:18,850
So, this is something that you should
design appropriately using the ND list and

79
00:06:18,850 --> 00:06:26,190
then making sure that the form is valid
before you display this information there.

80
00:06:26,190 --> 00:06:27,044
So, that is the preview.

81
00:06:27,044 --> 00:06:30,676
Now when the user clicks
on the Submit button,

82
00:06:30,676 --> 00:06:34,370
then there are a few things
that you need to do.

83
00:06:34,370 --> 00:06:39,344
When the user clicks on the Submit button,
then this comment will be

84
00:06:39,344 --> 00:06:44,589
added into the list of comments that
you have for this particular dish.

85
00:06:44,589 --> 00:06:50,943
So, let me click on the submit button and
you will immediately notice that the form

86
00:06:50,943 --> 00:06:56,490
has been added into the list of
comments for this particular dish.

87
00:06:56,490 --> 00:07:01,349
So, you see that the last comment that
I just entered has been added in here.

88
00:07:01,349 --> 00:07:05,632
Also notice that the date for

89
00:07:05,632 --> 00:07:13,140
the form has been added
into the comment here.

90
00:07:13,140 --> 00:07:18,612
So you are supposed to take
the values from the form model and

91
00:07:18,612 --> 00:07:24,084
then copy it into a data model,
and then you push the comment

92
00:07:24,084 --> 00:07:30,009
into the JavaScript object ray
of comments for the dish object.

93
00:07:30,009 --> 00:07:34,553
So, that is something that you need
to do using the array push method for

94
00:07:34,553 --> 00:07:36,960
JavaScript object array.

95
00:07:36,960 --> 00:07:41,534
Furthermore, the date should be
automatically configured and

96
00:07:41,534 --> 00:07:43,574
added in to that data model.

97
00:07:43,574 --> 00:07:48,510
Remember that the form model
doesn't contain the date, but

98
00:07:48,510 --> 00:07:54,800
the data model which is derived from
the comment class that we have designed,

99
00:07:54,800 --> 00:08:01,500
the data model contains the author,
the rating, the comment and the date.

100
00:08:01,500 --> 00:08:05,642
So, you need to add the date
into the data model.

101
00:08:05,642 --> 00:08:11,261
So, this is where you'll
make use of the Java Script

102
00:08:11,261 --> 00:08:16,370
date class together with
converting it to an ISO

103
00:08:16,370 --> 00:08:24,060
string before you store into the date
field of your comment data model.

104
00:08:24,060 --> 00:08:29,164
Now I have provided you links
to examples of how you can

105
00:08:29,164 --> 00:08:34,268
create date and
how you cab convert the date into an ISO

106
00:08:34,268 --> 00:08:39,148
string in the documentation for
this assignment,

107
00:08:39,148 --> 00:08:44,158
and also in the additional resources for
this item.

108
00:08:44,158 --> 00:08:48,904
So, please look that up to
understand how you're supposed to

109
00:08:48,904 --> 00:08:52,530
add the date to that comment field there.

110
00:08:52,530 --> 00:08:56,989
And once the comment is pushed
into the array of comments,

111
00:08:56,989 --> 00:09:02,176
then it'll join the rest of
the comments for that particular dish.

112
00:09:02,176 --> 00:09:06,600
You have to remember that we are not
saving this to the server side,

113
00:09:06,600 --> 00:09:09,129
because we don't have a server side.

114
00:09:09,129 --> 00:09:13,330
So if you reload your page,
that comment will disappear.

115
00:09:13,330 --> 00:09:15,040
That is perfectly acceptable.

116
00:09:15,040 --> 00:09:19,417
At this stage,
we are not trying to save the changes to

117
00:09:19,417 --> 00:09:23,810
the dish back to the server
through our dish service.

118
00:09:23,810 --> 00:09:27,542
That we will do in one
of the later cycles.

119
00:09:27,542 --> 00:09:31,811
So at this moment, if you reload this
page, the comment that you just input will

120
00:09:31,811 --> 00:09:35,240
disappear, but
that's perfectly acceptable.

121
00:09:35,240 --> 00:09:38,670
So, this is the third
task in your assignment.

122
00:09:39,720 --> 00:09:45,197
After you complete all the three tasks,
make sure that everything works

123
00:09:45,197 --> 00:09:50,602
correctly before you submit
the assignment solution to their system.

124
00:09:50,602 --> 00:09:54,269
[MUSIC]