Introduction To Angular 8 Forms

In this article, I am going to explain about Forms in Angular 8.

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

  1. FormControl - Basic functionality of individual form control.
  2. FormGroup - Aggregates the values of each form control.
  3. FormArray  - Aggregates the values of each form control into an array.
  4. 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 

 
Angular 8 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.
 
Angular 8 Forms
 
Step 2
 
In app.component.ts, we need to import formcontrol from @angular/forms. 
 
Angular 8 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.
 
Angular 8 Forms
 
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.
 
Angular 8 Forms
 
Finally, the output of the reactive forms. 
 
Angular 8 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.
 
Angular 8 Forms
 
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.
 
Angular 8 Forms
 
Step 3
 
Finally, write the app.component.html file.
 
Angular 8 Forms
 
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.
 
Angular 8 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!