Forms and Routers
Explore the essentials of Angular forms by learning the setup and usage of both reactive and template-driven forms. Understand how to bind form data, apply validation, and submit user inputs. Discover Angular routing to navigate between components, enabling you to build interactive, user-friendly frontend applications.
Forms in Angular
When building applications, forms are most often used in many scenarios. Angular doesn’t disappoint when it comes to forms, and it has built-in APIs that are very powerful in form integration.
We’ll look at two types of forms in Angular—reactive forms and the template-driven form.
Reactive forms
Reactive forms provide a model-driven approach to handling form inputs whose values change over time. The directives used to build the reactive forms are in the ReactiveFormsModule.
The structure of a reactive form is defined in the component class. The form model is created with Form Groups, Form Controls, Form Arrays, Form Builders, and AbstractControl. We also define the validation rules in the component class. Next, we bind it to the HTML form in the template.
Reactive Form API
Class | Description |
| This is the abstract base class for the concrete form control classes |
| This manages the value and validity status of an individual form control. It corresponds to an HTML form control, such as |
| This manages the value and validity state of a group of |
| This manages the value and validity state of a numerically indexed array of |
| This is an injectable service that provides factory methods for creating control instances. |
Reactive form in action
To see the reactive form in action, we create a simple project below. Here, we can type into an input field and display the value ...