5 lines
57 KiB
JSON
5 lines
57 KiB
JSON
|
{
|
||
|
|
"id": "guide/reactive-forms",
|
||
|
|
"title": "Reactive forms",
|
||
|
|
"contents": "\n\n\n<div class=\"github-links\">\n <a href=\"https://github.com/angular/angular/edit/master/aio/content/guide/reactive-forms.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=\"reactive-forms\">Reactive forms<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/reactive-forms#reactive-forms\"><i class=\"material-icons\">link</i></a></h1>\n<p>Reactive forms provide a model-driven approach to handling form inputs whose values change over time. This guide shows you how to create and update a basic form control, progress to using multiple controls in a group, validate form values, and create dynamic forms where you can add or remove controls at run time.</p>\n<div class=\"alert is-helpful\">\n<p>Try this <live-example title=\"Reactive Forms in Stackblitz\">Reactive Forms live-example</live-example>.</p>\n</div>\n<p><strong>Prerequisites</strong></p>\n<p>Before going further into reactive forms, you should have a basic understanding of the following:</p>\n<ul>\n<li><a href=\"https://www.typescriptlang.org/\" title=\"The TypeScript language\">TypeScript</a> programming.</li>\n<li>Angular app-design fundamentals, as described in <a href=\"guide/architecture\" title=\"Introduction to Angular concepts.\">Angular Concepts</a>.</li>\n<li>The form-design concepts that are presented in <a href=\"guide/forms-overview\" title=\"Overview of Angular forms.\">Introduction to Forms</a>.</li>\n</ul>\n<a id=\"intro\"></a>\n<h2 id=\"overview-of-reactive-forms\">Overview of reactive forms<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/reactive-forms#overview-of-reactive-forms\"><i class=\"material-icons\">link</i></a></h2>\n<p>Reactive forms use an explicit and immutable approach to managing the state of a form at a given point in time. Each change to the form state returns a new state, which maintains the integrity of the model between changes. Reactive forms are built around <a href=\"guide/glossary#observable\" title=\"Observable definition.\">observable</a> streams, where form inputs and values are provided as streams of input values, which can be accessed synchronously.</p>\n<p>Reactive forms also provide a straightforward path to testing because you are assured that your data is consistent and predictable when requested. Any consumers of the streams have access to manipulate that data safely.</p>\n<p>Reactive forms differ from <a href=\"guide/forms\" title=\"Template-driven forms guide\">template-driven forms</a> in distinct ways. Reactive forms provide more predictability with synchronous access to the data model, immutability with observable operators, and change tracking through observable streams.</p>\n<p>Template-driven forms allow direct access to modify data in your template, but are less explicit than reactive forms because they rely on directives embedded in the template, along with mutable data to track changes asynchronously. See the <a href=\"guide/forms-overview\" title=\"Overview of Angular forms.\">Forms Overview</a> for detailed comparisons between the two paradigms.</p>\n<h2 id=\"adding-a-basic-form-control\">Adding a basic form control<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/reactive-forms#adding-a-basic-form-control\"><i class=\"material-icons\">link</i></a></h2>\n<p>There are three steps to using form controls.</p>\n<ol>\n<li>Register the reactive forms module in your app. This module declares the reactive-form directives that you need to use reactive forms.</li>\n<li>Generate a new <code><a href=\"api/forms/FormControl\" class=\"code-anchor\">FormControl</a></code> instance and save it in the component.</li>\n<li>Register the <code><a href=\"api/forms/FormControl\" class=\"code-anchor\">FormControl</a></code> in the template.</li>\n</ol>\n<p>You can then display the form by adding the component t
|
||
|
|
}
|