In this section, we are going to get started with the log in and registration forms forms play a significant
role in every application.
We have the chance to play with forms in the first few sections.
It's time to ramp things up.
Developing forms is a common yet complex task.
There are various cases we need to consider.
Firstly, we need to implement validation.
Form validation is the reason JavaScript exists today.
It was introduced as a language to handle form validation on the web back in the old days.
Validating a form required a lot of resources by performing validation on the client.
Fewer resources are utilized.
This is still true to this day.
Another requirement of a form is to provide feedback.
Users want immediate feedback if they fill out a form incorrectly.
We should give as much information as possible to help them fill out a form.
It can improve user experience significantly.
Lastly, forms may need dynamic fields.
If you've ever purchased a product online, you've probably been asked if you're willing address is
the same as your shipping address or vice versa.
If so, you may have to fill out a completely different set of fields.
Otherwise, the form would merge your shipping and billing addresses.
Forms must react to user input.
You will likely need to perform this task.
Overall, forms can have various requirements.
The more complex your form, the more challenges you will face.
We've learned so much already.
Everything we've learned can help us tackle these problems.
We can use inputs and outputs to help us handle forms.
This solution works fine for small forms.
However, there is an even better way to handle forms angular ships with two features for handling forms.
We have two completely different systems for managing forms and angular.
You can use either one depending on the needs of your app.
In this course, we are going to be learning both form systems.
The first system is called reactive forms.
Reactive forms are very robust.
They are configured the a component class.
They can help us achieve complex forms easily.
However, they have a larger learning curve.
Despite the learning curve, most developers prefer reactive forms because of how scalable they can
be.
The other system is called template forms.
It's easier to learn out of the two systems.
Unlike reactive forms, there's less flexibility.
This system is aimed at forms with fewer requirements.
We can configure forms through a components templates.
Both options are viable.
It depends on what you're trying to achieve with your forms.
Since reactive forms are the most popular system out of the two, we will start with this feature.
Before starting, let's separate our forms into components.
They are currently sitting inside a single component for manageability.
It'll be easier to work on our forms in separate components.
We have two forms.
Therefore, we will create two components inside the command line.
Run the following command energy GC user slash log in.
Next, we will run another command energy G.
C user slash register.
Both forms will be declared inside the user module.
Let's open the authentication model template file.
We will transfer the forms into their respective components inside our components, find the log in
form.
It'll have a comment above it that says log in form, cut the entire form element from the template
file.
Afterward, open the log component template file, it should be inside the same directory as the authentication
moral component.
Replace the existing template with our form.
Go back to the authentication modal template file search for the registration form.
It can be found under a comment that says registration form cut the entire form element from the template
file.
Next, open the register component template file.
Replace the existing template with our form.
Lastly, we will need to load both components inside the authentication moral component.
We don't need to import or declare anything.
All three components will be declared from within the same module.
We have access to our form components inside that template.
We will add the forms to their original locations.
The log in form should be inside the first tab.
The registration form should be inside the second tab.
Let's verify the forms are working in the browser.
Awesome.
We've separated the forms into separate components.
This refactoring will allow us to focus on each form separately in the next lecture.
We are going to make these forms functional with angular, reactive form system.