1
00:00:00,090 --> 00:00:04,260
In this lecture we are going to handle the form submission for the clip.

2
00:00:04,650 --> 00:00:09,510
The form we've created will update a specific clip uploaded by a user.

3
00:00:09,810 --> 00:00:15,540
We're going to do what we did last time will inform the user of the status of their submission.

4
00:00:15,540 --> 00:00:22,680
By using alerts we are going to add additional data properties to the edit component to manage the alerts.

5
00:00:23,010 --> 00:00:27,960
It's going to be similar to what we did with the login and registration forms.

6
00:00:28,440 --> 00:00:29,550
Let's get started.

7
00:00:29,820 --> 00:00:33,600
First, we need to turn the form into a reactive form.

8
00:00:34,140 --> 00:00:38,070
It'll be easier to manage the form through controls and groups.

9
00:00:38,340 --> 00:00:40,890
Open the edit component class file.

10
00:00:43,350 --> 00:00:46,800
We can skip importing the reactive forms module.

11
00:00:47,100 --> 00:00:52,440
The component is declared under the video module, which already imports this module.

12
00:00:52,800 --> 00:00:55,860
These features are exposed to our components.

13
00:00:56,130 --> 00:00:59,220
We can move on to binding the component to a group.

14
00:00:59,560 --> 00:01:06,600
We're going to import three classes from the Angular Slash Forms package there the form control form

15
00:01:06,600 --> 00:01:09,090
group and validators classes.

16
00:01:11,500 --> 00:01:14,950
Next we can declare the form group and control.

17
00:01:15,190 --> 00:01:20,320
In fact, the form for editing a song is the same form for editing a clip.

18
00:01:20,710 --> 00:01:23,920
We can reuse the code we've written for that form.

19
00:01:23,920 --> 00:01:24,820
For this form.

20
00:01:25,180 --> 00:01:27,970
Open the upload component class file.

21
00:01:30,440 --> 00:01:36,800
Search for the title control and the upload form group are going to copy these two properties.

22
00:01:39,270 --> 00:01:41,820
Back in the edit component class file.

23
00:01:41,820 --> 00:01:44,970
We will paste these properties into our class.

24
00:01:47,500 --> 00:01:51,460
The upload form property will be renamed to edit form.

25
00:01:54,000 --> 00:01:58,530
Not a necessary step, but we should keep our names relative to the action.

26
00:01:58,890 --> 00:02:04,290
If another developer comes across our code, they may be confused by their property name.

27
00:02:04,650 --> 00:02:08,639
Unlike the upload form, the edit form is going to need the ID.

28
00:02:09,270 --> 00:02:14,250
Let's create a control for storing the ID above the title control.

29
00:02:14,310 --> 00:02:16,860
Create a property called Clip ID.

30
00:02:19,720 --> 00:02:26,350
Its value will be a new instance of the form control class with an initial value of an empty string.

31
00:02:30,420 --> 00:02:31,140
Hey, everyone.

32
00:02:31,320 --> 00:02:34,680
I'm quickly jumping in to inform you of an issue with this solution.

33
00:02:34,920 --> 00:02:40,500
Since the release of Angular 14, typing four forms have become stricter by default.

34
00:02:40,710 --> 00:02:44,100
Angular allows form controls to have null values.

35
00:02:44,370 --> 00:02:48,870
For our case, our fields should not know as a valid value.

36
00:02:49,200 --> 00:02:55,410
As we learned with the upload component, we can disable this behavior by passing in an object as the

37
00:02:55,410 --> 00:02:56,580
second argument.

38
00:02:56,790 --> 00:03:00,960
In this object we can set the non Nullarbor property to true.

39
00:03:01,290 --> 00:03:04,690
Validators can be applied through the validators array.

40
00:03:05,010 --> 00:03:07,710
Update your form controls to this new example.

41
00:03:07,860 --> 00:03:10,770
Once you got that done, let's head back to the video.

42
00:03:13,620 --> 00:03:18,360
Both controls should be updated with the data from the active clip property.

43
00:03:18,780 --> 00:03:20,160
There's just one problem.

44
00:03:20,460 --> 00:03:23,070
Angular manages to update the property.

45
00:03:23,280 --> 00:03:28,020
But what if we want to be notified of changes to the components input properties?

46
00:03:28,320 --> 00:03:33,570
Unfortunately, we aren't informed of the changes to our components properties.

47
00:03:33,900 --> 00:03:40,560
Luckily, components have a lifecycle function to watch for changes at the top of the file.

48
00:03:40,710 --> 00:03:44,520
We're going to import an interface called On Changes.

49
00:03:46,980 --> 00:03:53,760
The On Changes interface will force our component to define a method called energy on changes.

50
00:03:54,180 --> 00:03:59,790
This method will be called whenever a component's properties are updated by a parent component.

51
00:04:00,180 --> 00:04:06,120
We can use this method to update our form controls when the active clip property is modified.

52
00:04:06,570 --> 00:04:09,960
Let's implement this interface on the component class.

53
00:04:12,660 --> 00:04:16,410
Next, define the N.G. on changes function.

54
00:04:18,990 --> 00:04:24,960
Inside this function, we're going to create a conditional statement for checking if the active clip

55
00:04:24,990 --> 00:04:26,340
property is empty.

56
00:04:26,670 --> 00:04:29,130
If it is, we'll return the function.

57
00:04:31,760 --> 00:04:35,210
It's possible the active clip property may be empty.

58
00:04:35,510 --> 00:04:41,480
If it is, we should avoid updating the form controls after the conditional statements.

59
00:04:41,630 --> 00:04:44,300
We can proceed to update the properties.

60
00:04:44,660 --> 00:04:48,080
We've learned how to update values from JavaScript.

61
00:04:48,500 --> 00:04:52,190
Form controls expose a method called set value.

62
00:04:52,190 --> 00:04:54,740
To update a form controls value.

63
00:04:55,100 --> 00:04:57,710
We'll call this method on both controls.

64
00:04:58,040 --> 00:05:02,780
They'll be set to their respective values from the active clip object.

65
00:05:05,400 --> 00:05:11,580
We won't be able to check if the fields get updated on the page until we've bound them to our form group.

66
00:05:11,940 --> 00:05:13,890
Let's start editing the template.

67
00:05:14,220 --> 00:05:16,650
Open the component template file.

68
00:05:20,550 --> 00:05:26,880
Starting with the form element, we will bind the form group property to the edit form property.

69
00:05:28,730 --> 00:05:33,230
As for the input, we can replace it with the app input component.

70
00:05:35,870 --> 00:05:42,440
The control can be passed down to the component by binding the control property to the title property.

71
00:05:45,400 --> 00:05:48,970
Another property we will add is the placeholder property.

72
00:05:49,390 --> 00:05:52,330
The value for this property will be the following.

73
00:05:52,600 --> 00:05:53,590
Enter title.

74
00:05:56,170 --> 00:05:58,630
Our form is now bound to the group.

75
00:05:58,900 --> 00:06:00,610
We've made a lot of changes.

76
00:06:00,850 --> 00:06:02,500
Let's give our app a test.

77
00:06:02,800 --> 00:06:05,710
Refresh the manage page in the browser.

78
00:06:08,350 --> 00:06:11,920
Clicking on the edit button will toggle the model's appearance.

79
00:06:12,160 --> 00:06:17,770
If we look closely at the title, it's been updated with the title from the clip object.

80
00:06:18,100 --> 00:06:24,040
If we open a different clip, the title should be updated with the corresponding clips values.

81
00:06:24,340 --> 00:06:25,000
Perfect.

82
00:06:25,270 --> 00:06:26,980
We've got a dynamic form.

83
00:06:27,280 --> 00:06:31,720
In the next lecture, we're going to finish the forum by submitting the data.