In this lecture, we are going to start working on the registration form.
Remember, we are working on the user system of our app.
The registration form should be functional for creating new user accounts in our app.
We are going to work on the UI of the registration form.
The form should validate the inputs, provide feedback and submit the data to a database.
These are things that can be taken care of with reactive forms.
First, we need to register our form with angular.
At the moment, Angular assumes the registration form is a plain HTML form.
It needs to become aware of this form.
The first step, regardless of what form we are trying to build, is to register the Reactive Forms
module.
We won't have access to the reactive forms features unless we register at this module first.
It will provide us with the necessary infrastructure and directives for developing reactive forms.
Open the user module file.
We will add an import statement for the reactive Forman's module from the Angular Forms package.
This module exports a series of directives for working with reactive forms.
We will add this module to the imports option.
The module is being imported into the user module.
There isn't a reason to import the React performance module into every module.
We should be mindful of where we import modules.
Take note of the path to the module to throughout most of this course, we've been importing functions
from the angular slash core package.
The reactor performs module can be found under a different package called angular slash forms.
After importing this module, we can begin registering our form.
Reactive forms are configured in a components class file.
We need to tell angular the structure and behavior of our form.
Open the register component class file.
Before registering the form, I'm going to clean up the class.
We will remove the nji on init function, constructor function and on init interface.
Next, at the top of the file, we will import an object called Form Group from the Angular Forms package.
The form group object allows us to register a new form.
You can think of it as a container for our form.
Sound familiar?
It's similar to our tabs component.
We created a container for our tabs because we may have multiple groups of tabs on a page.
We need to separate them from one another.
We can think of the form group object as a container for our forms.
We may have multiple forms on a page.
We need to isolate them from one another.
The form group object will allow us to create a container for a single form inside our class.
We will create a property called Register a form.
Its value will be a new instance of the form group object.
The instance has one argument, which is an object of configuration options.
We can configure this object to help angular understand what's inside the forum.
After creating a new instance of the form group, object will be able to retrieve info related to the
form and control it.
We can verify a group has been created by checking out the developer tools in the browser.
Under the list of components in the angular panel, we can review the register components properties,
the register form property will contain various properties created by the form group object.
This object will have methods and properties for interacting with the form in the next lecture.
We are going to begin adding our fields to this group.