Form Basics

Go back to Tutorial

Forms are the mainstay of business applications. You use forms to log in, submit a help request, place an order, book a flight, schedule a meeting, and perform countless other data-entry tasks.

In developing a form, it’s important to create a data-entry experience that guides the user efficiently and effectively through the workflow.

Developing forms requires design skills (which are out of scope for this page), as well as framework support for two-way data binding, change tracking, validation, and error handling, which you’ll learn about on this page.

An Angular FormControl represents a single input field, a FormGroup consists of multiple logically related fields, and an NgForm component represents a <form> element in an HTML Web page. The ngSubmit action for submitting a form has this syntax:

(ngSubmit)=”onSubmit(myForm.value)” .

NgForm provides the ngSubmit event, whereas you must define the onSubmit() method in the component class. The expression myForm.value consists of the key/value pairs in the form.

FormBuilder supports additional useful functionality.

Angular also supports template-driven forms (with a FormsModule ) and reactive forms (with a

ReactiveFormsModule ), both of which belong to @angular/forms . However, Reactive Forms are synchronous whereas template-driven forms are asynchronous.

Handling user input with forms is the cornerstone of many common applications. Applications use forms to enable users log in, to update a profile, to enter sensitive information, and to perform many other data-entry tasks.

Angular provides two different approaches to handling user input through forms: reactive and template-driven. 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.

Reactive and template-driven forms differ, however, in how they do the work of processing and managing forms and form data. Each offers different advantages.

In general:

• Reactive forms are more robust: they are 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 are useful for adding a simple form to an app, such as an email list signup form. They are easy to add to an app, but they do not scale as well as reactive forms. If you have very basic form requirements and logic that can be managed solely in the template, use template-driven forms.

Different Form Types

The table below summarizes the key differences between reactive and template-driven forms.

Feature	Reactive	Template-driven
Setup (form model)	More explicit, created in the component class.	Less explicit, created by the directives.
Data model	Structured	Unstructured
Predictability	Synchronous	Asynchronous
Form validation	Functions	Directives
Mutability	Immutable	Mutable
Scalability	Low-level API access	Abstraction on top of APIs

Common foundation

Both reactive and template-driven forms share underlying building blocks.

• A FormControl instance that tracks the value and validation status of an individual form control.
• A FormGroup instance that tracks the same values and status for a collection of form controls.
• A FormArray instance that tracks the same values and status for an array of form controls.
• A ControlValueAccessor that creates a bridge between Angular FormControl instances and native DOM elements.

Go back to Tutorial