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!