1
00:00:00,060 --> 00:00:06,060
In this lecture, we are going to start working on the upload form by enabling reactive forms.

2
00:00:06,360 --> 00:00:09,090
Technically, the upload form is simple.

3
00:00:09,360 --> 00:00:12,630
We can accomplish this objective with template forms.

4
00:00:12,870 --> 00:00:16,980
However, reactive forms are more common in angular apps.

5
00:00:17,280 --> 00:00:20,910
It's likely you will encounter them in real world scenarios.

6
00:00:21,210 --> 00:00:27,150
I want to give you every opportunity to practice with reactive forms to get started.

7
00:00:27,300 --> 00:00:30,870
We're going to need to import the Reactive Forms module.

8
00:00:31,230 --> 00:00:34,890
The upload component is declared under the video module.

9
00:00:35,190 --> 00:00:41,310
We won't have access to angular reactive forms feature unless we import them into our module.

10
00:00:41,670 --> 00:00:43,830
Open the video module file.

11
00:00:46,340 --> 00:00:53,090
At the top of the file, import the reactive forms module from the angular slash forms package.

12
00:00:55,530 --> 00:00:58,710
Next, add this module to the imports array.

13
00:01:01,290 --> 00:01:04,650
We can start converting our form into a reactive form.

14
00:01:04,860 --> 00:01:08,010
Switch over to the upload component class file.

15
00:01:08,370 --> 00:01:13,320
There are a couple of classes we're going to need from the Angular slash forms package.

16
00:01:13,620 --> 00:01:15,510
Import the following classes.

17
00:01:15,750 --> 00:01:16,740
Form Control.

18
00:01:16,920 --> 00:01:18,960
Form group validators.

19
00:01:21,420 --> 00:01:23,130
With these three classes.

20
00:01:23,130 --> 00:01:24,450
We should be good to go.

21
00:01:24,780 --> 00:01:26,910
It's time for another exercise.

22
00:01:27,120 --> 00:01:29,280
I want you to register the form.

23
00:01:29,640 --> 00:01:36,600
This process will involve creating form controls, form groups, and validating the inputs the template

24
00:01:36,600 --> 00:01:38,340
will need to be updated to.

25
00:01:39,000 --> 00:01:41,610
There's one field you can ignore for the form.

26
00:01:41,940 --> 00:01:45,540
In our form, we have a field for selecting a screenshots.

27
00:01:45,900 --> 00:01:48,330
This part of the form can be left alone.

28
00:01:48,720 --> 00:01:51,660
It's something we'll work on together in a future section.

29
00:01:52,050 --> 00:01:55,590
For now, we are going to handle one field in our form.

30
00:01:55,860 --> 00:01:57,860
Pause the video and good luck.

31
00:02:00,530 --> 00:02:01,370
Welcome back.

32
00:02:01,700 --> 00:02:05,450
Hopefully you were able to register the form with our components.

33
00:02:05,690 --> 00:02:07,880
Let's walk through the solution together.

34
00:02:08,240 --> 00:02:14,810
We will begin by declaring the form control and group in the component class below our properties.

35
00:02:14,900 --> 00:02:16,730
Let's create a form control.

36
00:02:17,120 --> 00:02:19,820
The name of the control will be called title.

37
00:02:20,120 --> 00:02:24,230
Its value will be a new instance of the form control class.

38
00:02:26,860 --> 00:02:29,830
The form control class has two arguments.

39
00:02:30,100 --> 00:02:32,740
The first argument is a default value.

40
00:02:33,040 --> 00:02:35,710
The initial value will be an empty string.

41
00:02:36,040 --> 00:02:40,930
However, we want to update the title of the video to the name of the file.

42
00:02:41,290 --> 00:02:45,430
This step is optional, but I think it would improve the user experience.

43
00:02:45,670 --> 00:02:48,430
Scroll down to the store file function.

44
00:02:49,030 --> 00:02:51,880
Before updating the next step property.

45
00:02:52,120 --> 00:02:56,800
We're going to call the this dot title dot set value function.

46
00:02:59,340 --> 00:03:03,540
The set value function is defined on the form control class.

47
00:03:03,900 --> 00:03:07,980
This function will programmatically update a form controls value.

48
00:03:08,340 --> 00:03:11,940
We don't always have to wait for the user to input a value.

49
00:03:12,330 --> 00:03:16,410
Angular gives us the power of updating the input through our class.

50
00:03:16,770 --> 00:03:19,410
This value will be reflected in the template.

51
00:03:19,800 --> 00:03:24,810
We're going to set the value to the this dot file name property.

52
00:03:27,400 --> 00:03:30,730
The name property will store the full name of the file.

53
00:03:30,970 --> 00:03:35,380
We can take this solution a step further by removing the file extension.

54
00:03:35,710 --> 00:03:38,170
Users may want to remove it from the title.

55
00:03:38,410 --> 00:03:42,160
We should step in and help them shame the replace function.

56
00:03:44,650 --> 00:03:47,290
I'm going to paste in a regular expression.

57
00:03:51,480 --> 00:03:55,470
This regular expression will remove the file extension from a string.

58
00:03:55,800 --> 00:03:58,950
If the regular expression finds a file extension.

59
00:03:59,100 --> 00:04:01,410
We will replace it with an empty string.

60
00:04:03,890 --> 00:04:06,380
Let's move on to validating this field.

61
00:04:06,560 --> 00:04:09,890
We don't want users to submit a clip without a title.

62
00:04:10,160 --> 00:04:13,280
Let's go back to the control definition for the title.

63
00:04:13,580 --> 00:04:18,890
The second argument to the class is an array of validators inside this array.

64
00:04:19,010 --> 00:04:23,010
Let's add the required and minimum length validators.

65
00:04:23,330 --> 00:04:27,890
The minimum length validator will have a threshold of three characters.

66
00:04:30,440 --> 00:04:31,760
Our control is ready.

67
00:04:33,400 --> 00:04:34,120
Hey, everyone.

68
00:04:34,210 --> 00:04:39,100
Since the release of Angular 14, this solution will give us trouble later down the line.

69
00:04:39,370 --> 00:04:45,760
To resolve these issues, check out this alternative syntax for the second argument of the form control

70
00:04:45,760 --> 00:04:46,270
class.

71
00:04:46,510 --> 00:04:49,870
We can pass in an object and save an array of validators.

72
00:04:50,200 --> 00:04:55,630
By default, Angular will allow form controls to have a no value in the future.

73
00:04:55,750 --> 00:04:58,240
We are not going to allow the title to no.

74
00:04:58,540 --> 00:05:03,490
We can disable this behavior by sending the non Nullarbor property to true.

75
00:05:03,790 --> 00:05:05,530
But what about validators?

76
00:05:05,920 --> 00:05:10,870
Validators can be applied to a control by adding a property called validators.

77
00:05:11,170 --> 00:05:14,590
Through this property we can add an array of validators.

78
00:05:14,860 --> 00:05:18,520
Be sure to update your code to this example before proceeding.

79
00:05:18,820 --> 00:05:19,390
All right.

80
00:05:19,570 --> 00:05:20,650
Back to the video.

81
00:05:21,920 --> 00:05:27,500
In a moment it'll be wired to the template before we connect the controller with the input.

82
00:05:27,680 --> 00:05:31,120
We should add a form group below the form control.

83
00:05:31,130 --> 00:05:33,830
Create a property called upload form.

84
00:05:34,250 --> 00:05:38,330
Its value will be a new instance of the form group class.

85
00:05:40,960 --> 00:05:44,380
Next, we need to register our control with our group.

86
00:05:44,650 --> 00:05:46,120
We have one control.

87
00:05:46,450 --> 00:05:52,630
There are two fields, but we will ignore the screenshot field until we've talked about webassembly.

88
00:05:52,960 --> 00:05:59,590
For now we're going to focus on the title field passing an object with a property called Title.

89
00:05:59,860 --> 00:06:02,530
Its value will be the title control.

90
00:06:05,120 --> 00:06:07,730
There isn't much else we need to do with the group.

91
00:06:08,000 --> 00:06:12,470
There's one last thing I want to add to the class before moving on to the template.

92
00:06:12,800 --> 00:06:19,160
We should define a function for handling the form submission at the bottom of the class to find a method

93
00:06:19,160 --> 00:06:20,720
called upload file.

94
00:06:23,340 --> 00:06:26,220
Inside this method, we will log a message.

95
00:06:28,690 --> 00:06:33,610
We're logging a message to help us test the form submission in the later lecture.

96
00:06:33,760 --> 00:06:37,210
This method will be updated to handle the file upload.

97
00:06:37,570 --> 00:06:39,520
It's time to update the template.

98
00:06:39,850 --> 00:06:42,130
Switch over to the upload template.

99
00:06:44,560 --> 00:06:47,470
Search for the form element in the template.

100
00:06:47,830 --> 00:06:51,790
It'll be below a comment that says form on this element.

101
00:06:51,820 --> 00:06:56,590
We can bind the form to the group by binding a property called Form Group.

102
00:06:56,950 --> 00:07:01,570
This property should be bound to the upload form object in our class.

103
00:07:04,130 --> 00:07:08,150
Next, let's handle the form submission on the same element.

104
00:07:08,210 --> 00:07:12,560
We can listen for the form submission with the Energy Submit directive.

105
00:07:12,830 --> 00:07:16,850
If this event gets emitted, we'll run the upload file function.

106
00:07:19,420 --> 00:07:22,210
Typically forms will refresh the page.

107
00:07:22,450 --> 00:07:27,820
However, the Energy Submit directive will automatically prevent the default behavior.

108
00:07:28,150 --> 00:07:32,020
We can move on to binding the control inside the form.

109
00:07:32,140 --> 00:07:36,010
We can find the input for the title under a comment that says title.

110
00:07:36,430 --> 00:07:41,350
On top of finding the input, an error message should be rendered below the input.

111
00:07:41,950 --> 00:07:43,750
Luckily, we can skip all that.

112
00:07:43,960 --> 00:07:50,260
The video module is importing the shared module, thus giving us access to the input component.

113
00:07:50,290 --> 00:07:52,300
We created a few sections ago.

114
00:07:52,660 --> 00:07:59,350
By planning ahead, we can reuse components, replace the input element with the app input component.

115
00:08:01,940 --> 00:08:05,720
We're going to pass on two pieces of information to this component.

116
00:08:06,020 --> 00:08:11,420
First, we will bind the control property to the title form control.

117
00:08:13,990 --> 00:08:18,370
Second, we will set the placeholder property to the following value.

118
00:08:18,700 --> 00:08:19,720
Enter title.

119
00:08:22,280 --> 00:08:24,080
With the final property set.

120
00:08:24,200 --> 00:08:25,760
We're finished with our form.

121
00:08:26,060 --> 00:08:27,650
It's time to give it a test.

122
00:08:27,860 --> 00:08:29,750
Refresh the page in the browser.

123
00:08:32,289 --> 00:08:34,690
Let's drag a video onto the uploader.

124
00:08:34,929 --> 00:08:39,730
Hopefully you should be presented with a form inside the title field.

125
00:08:39,909 --> 00:08:43,330
The input has been pre-filled with the name of the file.

126
00:08:43,720 --> 00:08:45,680
The extension has been excluded.

127
00:08:46,030 --> 00:08:50,590
If we were to empty this field, that should trigger an error with our validator.

128
00:08:53,180 --> 00:08:59,720
Lastly, we should be able to submit the form, open the console in the developer tools before submitting

129
00:08:59,720 --> 00:09:00,260
the form.

130
00:09:02,880 --> 00:09:03,510
Perfect.

131
00:09:03,840 --> 00:09:08,490
We can move on to sending the file to Firebase when the user submits the form.

132
00:09:08,850 --> 00:09:11,820
Let's handle the file upload in the next lecture.