5 lines
29 KiB
JSON
5 lines
29 KiB
JSON
|
{
|
||
|
|
"id": "guide/forms-overview",
|
||
|
|
"title": "Introduction to forms in Angular",
|
||
|
|
"contents": "\n\n\n<div class=\"github-links\">\n <a href=\"https://github.com/angular/angular/edit/master/aio/content/guide/forms-overview.md?message=docs%3A%20describe%20your%20change...\" aria-label=\"Suggest Edits\" title=\"Suggest Edits\"><i class=\"material-icons\" aria-hidden=\"true\" role=\"img\">mode_edit</i></a>\n</div>\n\n\n<div class=\"content\">\n <h1 id=\"introduction-to-forms-in-angular\">Introduction to forms in Angular<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/forms-overview#introduction-to-forms-in-angular\"><i class=\"material-icons\">link</i></a></h1>\n<p>Handling user input with forms is the cornerstone of many common applications. Applications use forms to enable users to log in, to update a profile, to enter sensitive information, and to perform many other data-entry tasks.</p>\n<p>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.</p>\n<p>This guide provides information to help you decide which type of form works best for your situation. It introduces the common building blocks used by both approaches. It also summarizes the key differences between the two approaches, and demonstrates those differences in the context of setup, data flow, and testing.</p>\n<h2 id=\"prerequisites\">Prerequisites<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/forms-overview#prerequisites\"><i class=\"material-icons\">link</i></a></h2>\n<p>This guide assumes that you have a basic understanding of the following.</p>\n<ul>\n<li>\n<p><a href=\"https://www.typescriptlang.org/\" title=\"The TypeScript language\">TypeScript</a> and HTML5 programming.</p>\n</li>\n<li>\n<p>Angular app-design fundamentals, as described in <a href=\"guide/architecture\" title=\"Introduction to Angular concepts.\">Angular Concepts</a>.</p>\n</li>\n<li>\n<p>The basics of <a href=\"guide/architecture-components#template-syntax\" title=\"Template syntax intro\">Angular template syntax</a>.</p>\n</li>\n</ul>\n<h2 id=\"choosing-an-approach\">Choosing an approach<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/forms-overview#choosing-an-approach\"><i class=\"material-icons\">link</i></a></h2>\n<p>Reactive forms and template-driven forms process and manage form data differently. Each approach offers different advantages.</p>\n<ul>\n<li>\n<p><strong>Reactive forms</strong> 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.</p>\n</li>\n<li>\n<p><strong>Template-driven forms</strong> 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 easy 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.</p>\n</li>\n</ul>\n<h3 id=\"key-differences\">Key differences<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/forms-overview#key-differences\"><i class=\"material-icons\">link</i></a></h3>\n<p>The table below summarizes the key differences between reactive and template-driven forms.</p>\n<style>\n table {width: 100%};\n td, th {vertical-align: top};\n</style>\n<table>\n<thead>\n<tr>\n<th></th>\n<th>Reactive</th>\n<th>Template-driven</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td><a href=\"guide/forms-overview#setup\">Setup of form model</a></td>\n<td>Explicit, created in component class</td>\n<td>Implicit, created by directives</td>\n</tr>\n<tr>\n<td><a hre
|
||
|
|
}
|