1
00:00:00,150 --> 00:00:06,300
In this lecture, we were going to handle the form submission with a custom event emitted by the form

2
00:00:06,300 --> 00:00:07,320
group object.

3
00:00:07,740 --> 00:00:11,010
There's already an event for listening to submission events.

4
00:00:11,280 --> 00:00:17,790
Despite the availability of this event, Angular introduces a custom event for listening to submission

5
00:00:17,790 --> 00:00:18,330
events.

6
00:00:18,600 --> 00:00:20,280
Let's explore the differences.

7
00:00:20,550 --> 00:00:23,490
Open the register component template file.

8
00:00:26,040 --> 00:00:31,680
On the form element, we are going to bind to events called submit and nji submit.

9
00:00:34,250 --> 00:00:40,280
Both events will get triggered on form submission, the submit event is the default browser submission

10
00:00:40,280 --> 00:00:40,730
event.

11
00:00:41,090 --> 00:00:45,410
The Nji Submit Event is a custom event by Angular.

12
00:00:45,800 --> 00:00:48,710
There's one small difference between the two events.

13
00:00:49,010 --> 00:00:54,830
The Nji submit will automatically stop the browser from refreshing when the form is submitted.

14
00:00:55,250 --> 00:00:57,770
This step needs to be performed manually.

15
00:00:57,770 --> 00:01:04,489
If we use the submit event, you can think of it as a shorthand way of listening for submission events

16
00:01:04,489 --> 00:01:08,240
while preventing the default behavior for obvious reasons.

17
00:01:08,360 --> 00:01:11,150
We are going to use the Nji Submit event.

18
00:01:11,450 --> 00:01:13,520
Let's remove the submit event.

19
00:01:16,130 --> 00:01:22,460
Let's run the function on the Nag submit event, the name of the function will be called register.

20
00:01:25,000 --> 00:01:32,260
Typically, we would pass on the event, object onto the function, since the nji submit event prevents

21
00:01:32,260 --> 00:01:34,990
the default behavior, we can skip this step.

22
00:01:35,350 --> 00:01:37,120
This function doesn't exist.

23
00:01:37,420 --> 00:01:38,410
Let's define it.

24
00:01:38,740 --> 00:01:41,620
Open the register component class file.

25
00:01:44,110 --> 00:01:47,080
Inside the class defined the register function.

26
00:01:49,540 --> 00:01:52,450
We are going to keep it simple by logging a message.

27
00:01:54,780 --> 00:01:57,900
Let's try testing out the submission in the browser.

28
00:01:58,230 --> 00:02:02,010
We are going to need to fill out the form by pressing the submit button.

29
00:02:07,500 --> 00:02:13,650
After submitting the form, nothing happens, let's check out the console in the developer tools.

30
00:02:16,170 --> 00:02:21,640
The message from the register function gets logged as long as the page isn't refreshing.

31
00:02:21,660 --> 00:02:23,010
We should be good to go.

32
00:02:23,370 --> 00:02:27,540
If the page refreshed, the user would have to fill out the form again.

33
00:02:27,840 --> 00:02:31,410
Behind the scenes, we should submit their data to a server.

34
00:02:31,680 --> 00:02:34,230
We will handle this step in another section.

35
00:02:34,530 --> 00:02:37,590
For now, we've successfully submitted the form.

36
00:02:38,460 --> 00:02:41,940
There's one last feature I want to add to the registration form.

37
00:02:42,210 --> 00:02:45,030
Users should be given feedback while they wait.

38
00:02:45,330 --> 00:02:49,200
Let's work on providing submission feedback in the next lecture.