5 lines
49 KiB
JSON
5 lines
49 KiB
JSON
|
{
|
||
|
|
"id": "guide/forms",
|
||
|
|
"title": "Building a template-driven form",
|
||
|
|
"contents": "\n\n\n<div class=\"github-links\">\n <a href=\"https://github.com/angular/angular/edit/master/aio/content/guide/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=\"building-a-template-driven-form\">Building a template-driven form<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/forms#building-a-template-driven-form\"><i class=\"material-icons\">link</i></a></h1>\n<a id=\"template-driven\"></a>\n<p>This tutorial shows you how to create a template-driven form whose control elements are bound to data properties, with input validation to maintain data integrity and styling to improve the user experience.</p>\n<p>Template-driven forms use <a href=\"guide/architecture-components#data-binding\" title=\"Intro to 2-way data binding\">two-way data binding</a> to update the data model in the component as changes are made in the template and vice versa.</p>\n<div class=\"alert is-helpful\">\n<p>Angular supports two design approaches for interactive forms. You can build forms by writing templates using Angular <a href=\"guide/glossary#template\" title=\"Definition of template terms\">template syntax and directives</a> with the form-specific directives and techniques described in this tutorial, or you can use a reactive (or model-driven) approach to build forms.</p>\n<p>Template-driven forms are suitable for small or simple forms, while reactive forms are more scalable and suitable for complex forms.\nFor a comparison of the two approaches, see <a href=\"guide/forms-overview\" title=\"Overview of Angular forms.\">Introduction to Forms</a></p>\n</div>\n<p>You can build almost any kind of form with an Angular template—login forms, contact forms, and pretty much any business form.\nYou can lay out the controls creatively and bind them to the data in your object model.\nYou can specify validation rules and display validation errors,\nconditionally enable or disable specific controls, trigger built-in visual feedback, and much more.</p>\n<p>This tutorial shows you how to build a form from scratch, using a simplified sample form like the one from the <a href=\"tutorial\" title=\"Tour of Heroes\">Tour of Heroes tutorial</a> to illustrate the techniques.</p>\n<div class=\"alert is-helpful\">\n<p> Run or download the example app: <live-example></live-example>.</p>\n</div>\n<h2 id=\"objectives\">Objectives<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/forms#objectives\"><i class=\"material-icons\">link</i></a></h2>\n<p>This tutorial teaches you how to do the following:</p>\n<ul>\n<li>Build an Angular form with a component and template.</li>\n<li>Use <code><a href=\"api/forms/NgModel\" class=\"code-anchor\">ngModel</a></code> to create two-way data bindings for reading and writing input-control values.</li>\n<li>Provide visual feedback using special CSS classes that track the state of the controls.</li>\n<li>Display validation errors to users and enable or disable form controls based on the form status.</li>\n<li>Share information across HTML elements using <a href=\"guide/template-reference-variables\">template reference variables</a>.</li>\n</ul>\n<h2 id=\"prerequisites\">Prerequisites<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/forms#prerequisites\"><i class=\"material-icons\">link</i></a></h2>\n<p>Before going further into template-driven 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> and HTML5 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 basics of <a href=\"guide/template-syntax\" title=\"Template syntax guide\">Angular template syntax</a>.</li>\n<li>The
|
||
|
|
}
|