1
00:00:00,120 --> 00:00:04,380
In this lecture, we are going to start working on the registration form.

2
00:00:04,710 --> 00:00:08,460
Remember, we are working on the user system of our app.

3
00:00:08,790 --> 00:00:14,100
The registration form should be functional for creating new user accounts in our app.

4
00:00:14,490 --> 00:00:18,060
We are going to work on the UI of the registration form.

5
00:00:18,420 --> 00:00:24,210
The form should validate the inputs, provide feedback and submit the data to a database.

6
00:00:24,690 --> 00:00:28,410
These are things that can be taken care of with reactive forms.

7
00:00:28,710 --> 00:00:32,100
First, we need to register our form with angular.

8
00:00:32,369 --> 00:00:37,980
At the moment, Angular assumes the registration form is a plain HTML form.

9
00:00:38,340 --> 00:00:40,500
It needs to become aware of this form.

10
00:00:41,160 --> 00:00:47,500
The first step, regardless of what form we are trying to build, is to register the Reactive Forms

11
00:00:47,520 --> 00:00:48,150
module.

12
00:00:48,450 --> 00:00:54,150
We won't have access to the reactive forms features unless we register at this module first.

13
00:00:54,510 --> 00:01:00,570
It will provide us with the necessary infrastructure and directives for developing reactive forms.

14
00:01:00,930 --> 00:01:03,090
Open the user module file.

15
00:01:05,650 --> 00:01:12,370
We will add an import statement for the reactive Forman's module from the Angular Forms package.

16
00:01:14,970 --> 00:01:20,100
This module exports a series of directives for working with reactive forms.

17
00:01:20,490 --> 00:01:23,460
We will add this module to the imports option.

18
00:01:26,120 --> 00:01:29,540
The module is being imported into the user module.

19
00:01:29,870 --> 00:01:34,910
There isn't a reason to import the React performance module into every module.

20
00:01:35,240 --> 00:01:38,480
We should be mindful of where we import modules.

21
00:01:38,810 --> 00:01:45,140
Take note of the path to the module to throughout most of this course, we've been importing functions

22
00:01:45,140 --> 00:01:47,960
from the angular slash core package.

23
00:01:48,290 --> 00:01:54,980
The reactor performs module can be found under a different package called angular slash forms.

24
00:01:55,580 --> 00:01:59,840
After importing this module, we can begin registering our form.

25
00:02:00,200 --> 00:02:04,310
Reactive forms are configured in a components class file.

26
00:02:04,730 --> 00:02:09,139
We need to tell angular the structure and behavior of our form.

27
00:02:09,500 --> 00:02:12,470
Open the register component class file.

28
00:02:15,000 --> 00:02:18,660
Before registering the form, I'm going to clean up the class.

29
00:02:18,960 --> 00:02:25,950
We will remove the nji on init function, constructor function and on init interface.

30
00:02:28,470 --> 00:02:36,540
Next, at the top of the file, we will import an object called Form Group from the Angular Forms package.

31
00:02:39,090 --> 00:02:42,840
The form group object allows us to register a new form.

32
00:02:43,140 --> 00:02:46,020
You can think of it as a container for our form.

33
00:02:46,380 --> 00:02:47,400
Sound familiar?

34
00:02:47,610 --> 00:02:49,890
It's similar to our tabs component.

35
00:02:50,160 --> 00:02:56,250
We created a container for our tabs because we may have multiple groups of tabs on a page.

36
00:02:56,550 --> 00:02:58,830
We need to separate them from one another.

37
00:02:59,340 --> 00:03:03,720
We can think of the form group object as a container for our forms.

38
00:03:03,960 --> 00:03:06,600
We may have multiple forms on a page.

39
00:03:06,900 --> 00:03:09,270
We need to isolate them from one another.

40
00:03:09,630 --> 00:03:16,230
The form group object will allow us to create a container for a single form inside our class.

41
00:03:16,380 --> 00:03:19,380
We will create a property called Register a form.

42
00:03:19,680 --> 00:03:23,540
Its value will be a new instance of the form group object.

43
00:03:26,000 --> 00:03:30,800
The instance has one argument, which is an object of configuration options.

44
00:03:31,070 --> 00:03:36,350
We can configure this object to help angular understand what's inside the forum.

45
00:03:36,800 --> 00:03:43,070
After creating a new instance of the form group, object will be able to retrieve info related to the

46
00:03:43,070 --> 00:03:44,540
form and control it.

47
00:03:44,900 --> 00:03:50,120
We can verify a group has been created by checking out the developer tools in the browser.

48
00:03:52,720 --> 00:03:58,930
Under the list of components in the angular panel, we can review the register components properties,

49
00:03:59,290 --> 00:04:05,500
the register form property will contain various properties created by the form group object.

50
00:04:05,920 --> 00:04:11,680
This object will have methods and properties for interacting with the form in the next lecture.

51
00:04:11,800 --> 00:04:15,100
We are going to begin adding our fields to this group.