Introduction To Angular 8 Forms

Menaka Priyadharshini B

5y28.5k8100Article

Angular 8 Forms Reactive FormsTemplate Driven Forms

8 Comments

Join the conversation! Your thoughts help the community grow.

Amit Kumar Singh5y ago
Nice Article !!
Saravanakumar Sekaran5y ago
Very nice article !!!
Andriy Zapisotskyi6y ago
Very useful!
Asish Panda7y ago
If possible Create a sample application and post.I think that way other can understand better way. Keep posting.
- Asish Panda7y ago
  First articles are nice. I was trying to say,while explaining any new topics it will be nice to post a sample demo projects/solution here.So that someone newbie like me can run the code as well understand in better way.
- Menaka Priyadharshini B7y ago
  Pardon . What you mean? I didn't understand
Amit Mohanty7y ago
Nice article
Saravanakumar Sekaran7y ago
Wow great article easy to understand !!!

Angular 8 Forms

In this article, we'll explore Forms in Angular 8. Forms play an important role in web applications and enable the users to perform data entry task and so on. Angular 8 provides two different approaches for managing users through a form.

Reactive Approach
Template-driven Approach

Both approaches share common building blocks of Angular Forms. Both reactive and template-driven approaches are used to manage the user input and to perform all data entry tasks. Let's see the common building blocks of Angular Forms.

Common building blocks

FormControl - Basic functionality of individual form control.
FormGroup - Aggregates the values of each form control.
FormArray - Aggregates the values of each form control into an array.
ControlValueAccessor - Interface (Bridge between Angular Forms API and DOM elements).

Reactive Forms

Reactive forms are also known as model-driven forms. In reactive forms, most of the work is done in the component class.

Template-driven Forms

Template-driven forms purely depend on the template. It is used to add simple login forms to a web app that solely depends on the template.

Difference between reactive forms and template-driven forms

Example of Angular Reactive Forms

Step 1

In app.module.ts, we need to import ReactiveFormsModule from @angular/forms and use the same in the import array.

Step 2

In app.component.ts, we need to import formcontrol from @angular/forms.

In the above code, formcontrol is used to track a value and validation status of an individual form.

Step 3

Finally, write the app.component.html file.

In the above code, we have created a textbox with initial value and one button which calls the function setvalue(). So when the user presses the Submit button, the initial values are get replaced by onclick event.

Finally, the output of the reactive forms.

Example of Template-driven Forms

Step 1

In app.module.ts, we need to import formsmodule from the @angular/forms library and use the same in the import array.

In the above code, formsmodule is used to export the directives for template-driven forms and making them available for ngmodule.

Step 2

In app.component.ts, we need to create a model and make changes to the model through a textbox. We don't have access to control instances in template-driven forms.

Step 3

Finally, write the app.component.html file.

In the above code, we have created two textboxes and interpolation. Template-driven forms purely work on templates.

Finally, the output of the reactive forms.

Watch here a full video on Angular Forms, and learn how to unleash the power of Angular Forms.

Summary

Finally, we have seen both the approaches of Forms in Angular 8. In the upcoming article, we'll see more detailed topics in Angular 8. Thanks for reading!