Forms and Routers
Learn about forms and routers in Angular.
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 ...