1
00:00:00,120 --> 00:00:07,230
In this section, we are going to get started with the log in and registration forms forms play a significant

2
00:00:07,230 --> 00:00:08,850
role in every application.

3
00:00:09,120 --> 00:00:12,750
We have the chance to play with forms in the first few sections.

4
00:00:13,110 --> 00:00:14,880
It's time to ramp things up.

5
00:00:15,090 --> 00:00:18,450
Developing forms is a common yet complex task.

6
00:00:18,840 --> 00:00:21,480
There are various cases we need to consider.

7
00:00:21,780 --> 00:00:24,540
Firstly, we need to implement validation.

8
00:00:24,810 --> 00:00:28,320
Form validation is the reason JavaScript exists today.

9
00:00:28,650 --> 00:00:34,360
It was introduced as a language to handle form validation on the web back in the old days.

10
00:00:34,410 --> 00:00:40,080
Validating a form required a lot of resources by performing validation on the client.

11
00:00:40,290 --> 00:00:42,330
Fewer resources are utilized.

12
00:00:42,600 --> 00:00:44,430
This is still true to this day.

13
00:00:45,090 --> 00:00:48,540
Another requirement of a form is to provide feedback.

14
00:00:48,750 --> 00:00:52,800
Users want immediate feedback if they fill out a form incorrectly.

15
00:00:53,070 --> 00:00:57,420
We should give as much information as possible to help them fill out a form.

16
00:00:57,750 --> 00:01:00,930
It can improve user experience significantly.

17
00:01:01,470 --> 00:01:04,680
Lastly, forms may need dynamic fields.

18
00:01:04,920 --> 00:01:10,980
If you've ever purchased a product online, you've probably been asked if you're willing address is

19
00:01:10,980 --> 00:01:13,830
the same as your shipping address or vice versa.

20
00:01:14,160 --> 00:01:18,630
If so, you may have to fill out a completely different set of fields.

21
00:01:18,960 --> 00:01:23,310
Otherwise, the form would merge your shipping and billing addresses.

22
00:01:23,640 --> 00:01:25,980
Forms must react to user input.

23
00:01:26,280 --> 00:01:28,980
You will likely need to perform this task.

24
00:01:29,520 --> 00:01:32,850
Overall, forms can have various requirements.

25
00:01:33,120 --> 00:01:36,900
The more complex your form, the more challenges you will face.

26
00:01:37,170 --> 00:01:38,970
We've learned so much already.

27
00:01:39,300 --> 00:01:42,510
Everything we've learned can help us tackle these problems.

28
00:01:42,750 --> 00:01:46,710
We can use inputs and outputs to help us handle forms.

29
00:01:47,040 --> 00:01:49,800
This solution works fine for small forms.

30
00:01:50,070 --> 00:01:57,600
However, there is an even better way to handle forms angular ships with two features for handling forms.

31
00:01:58,020 --> 00:02:02,520
We have two completely different systems for managing forms and angular.

32
00:02:02,790 --> 00:02:06,270
You can use either one depending on the needs of your app.

33
00:02:06,510 --> 00:02:10,380
In this course, we are going to be learning both form systems.

34
00:02:10,830 --> 00:02:13,830
The first system is called reactive forms.

35
00:02:14,070 --> 00:02:16,350
Reactive forms are very robust.

36
00:02:16,620 --> 00:02:18,990
They are configured the a component class.

37
00:02:19,260 --> 00:02:22,350
They can help us achieve complex forms easily.

38
00:02:22,620 --> 00:02:25,110
However, they have a larger learning curve.

39
00:02:25,440 --> 00:02:31,470
Despite the learning curve, most developers prefer reactive forms because of how scalable they can

40
00:02:31,470 --> 00:02:31,800
be.

41
00:02:32,340 --> 00:02:35,040
The other system is called template forms.

42
00:02:35,370 --> 00:02:38,110
It's easier to learn out of the two systems.

43
00:02:38,310 --> 00:02:41,580
Unlike reactive forms, there's less flexibility.

44
00:02:41,910 --> 00:02:45,720
This system is aimed at forms with fewer requirements.

45
00:02:45,990 --> 00:02:49,410
We can configure forms through a components templates.

46
00:02:49,920 --> 00:02:51,510
Both options are viable.

47
00:02:51,750 --> 00:02:55,050
It depends on what you're trying to achieve with your forms.

48
00:02:55,350 --> 00:03:01,470
Since reactive forms are the most popular system out of the two, we will start with this feature.

49
00:03:02,720 --> 00:03:06,410
Before starting, let's separate our forms into components.

50
00:03:06,650 --> 00:03:11,180
They are currently sitting inside a single component for manageability.

51
00:03:11,270 --> 00:03:15,230
It'll be easier to work on our forms in separate components.

52
00:03:15,530 --> 00:03:17,180
We have two forms.

53
00:03:17,420 --> 00:03:22,310
Therefore, we will create two components inside the command line.

54
00:03:22,490 --> 00:03:28,580
Run the following command energy GC user slash log in.

55
00:03:31,070 --> 00:03:35,210
Next, we will run another command energy G.

56
00:03:35,270 --> 00:03:37,880
C user slash register.

57
00:03:40,390 --> 00:03:43,870
Both forms will be declared inside the user module.

58
00:03:44,110 --> 00:03:47,430
Let's open the authentication model template file.

59
00:03:50,030 --> 00:03:56,480
We will transfer the forms into their respective components inside our components, find the log in

60
00:03:56,480 --> 00:03:56,930
form.

61
00:03:57,260 --> 00:04:03,830
It'll have a comment above it that says log in form, cut the entire form element from the template

62
00:04:03,830 --> 00:04:04,340
file.

63
00:04:06,880 --> 00:04:14,680
Afterward, open the log component template file, it should be inside the same directory as the authentication

64
00:04:14,680 --> 00:04:15,790
moral component.

65
00:04:18,290 --> 00:04:20,899
Replace the existing template with our form.

66
00:04:23,460 --> 00:04:28,740
Go back to the authentication modal template file search for the registration form.

67
00:04:29,100 --> 00:04:36,120
It can be found under a comment that says registration form cut the entire form element from the template

68
00:04:36,120 --> 00:04:36,630
file.

69
00:04:39,140 --> 00:04:42,890
Next, open the register component template file.

70
00:04:45,460 --> 00:04:48,110
Replace the existing template with our form.

71
00:04:50,660 --> 00:04:56,810
Lastly, we will need to load both components inside the authentication moral component.

72
00:04:57,140 --> 00:04:59,840
We don't need to import or declare anything.

73
00:05:00,230 --> 00:05:03,980
All three components will be declared from within the same module.

74
00:05:04,310 --> 00:05:08,330
We have access to our form components inside that template.

75
00:05:08,570 --> 00:05:11,690
We will add the forms to their original locations.

76
00:05:14,220 --> 00:05:17,160
The log in form should be inside the first tab.

77
00:05:17,550 --> 00:05:20,940
The registration form should be inside the second tab.

78
00:05:21,270 --> 00:05:24,330
Let's verify the forms are working in the browser.

79
00:05:26,990 --> 00:05:27,590
Awesome.

80
00:05:27,830 --> 00:05:31,070
We've separated the forms into separate components.

81
00:05:31,340 --> 00:05:37,100
This refactoring will allow us to focus on each form separately in the next lecture.

82
00:05:37,250 --> 00:05:42,440
We are going to make these forms functional with angular, reactive form system.