Forms
Angular provides two different approaches to handling user input through forms: Reactive Forms and Template Driven Forms. Both capture user input events from the view, validate the user input, create a form model and data model to update, and provide a way to track changes.
Remember to import them in the
app.module.ts
Choosing an approach
Reactive forms and template-driven forms process and manage form data differently. Each approach offers different advantages.
| Forms | Details |
|---|---|
| Reactive forms | Provide direct, explicit access to the underlying forms object model. Compared to template-driven forms, they are more robust: they're more scalable, reusable, and testable. If forms are a key part of your application, or you're already using reactive patterns for building your application, use reactive forms. |
| Template-driven forms | Rely on directives in the template to create and manipulate the underlying object model. They are useful for adding a simple form to an app, such as an email list signup form. They're straightforward to add to an app, but they don't scale as well as reactive forms. If you have very basic form requirements and logic that can be managed solely in the template, template-driven forms could be a good fit. |
Key differences
The following table summarizes the key differences between reactive and template-driven forms.
| Reactive | Template-driven | |
|---|---|---|
| Setup of form model | Explicit, created in component class | Implicit, created by directives |
| Data model | Structured and immutable | Unstructured and mutable |
| Data flow | Synchronous | Asynchronous |
| Form validation | Functions | Directives |
Scalability
If forms are a central part of your application, scalability is very important. Being able to reuse form models across components is critical.
Reactive forms are more scalable than template-driven forms. They provide direct access to the underlying form API, and use synchronous data flow between the view and the data model, which makes creating large-scale forms easier. Reactive forms require less setup for testing, and testing does not require deep understanding of change detection to properly test form updates and validation.
Template-driven forms focus on simple scenarios and are not as reusable. They abstract away the underlying form API, and use asynchronous data flow between the view and the data model. The abstraction of template-driven forms also affects testing. Tests are deeply reliant on manual change detection execution to run properly, and require more setup.
Common form foundation classes
Both reactive and template-driven forms are built on the following base classes.
| Base classes | Details |
|---|---|
| FormControl | Tracks the value and validation status of an individual form control. |
| FormGroup | Tracks the same values and status for a collection of form controls. |
| FormArray | Tracks the same values and status for an array of form controls. |
| ControlValueAccessor | Creates a bridge between Angular FormControl instances and built-in DOM elements. |
Children