5 lines
26 KiB
JSON
5 lines
26 KiB
JSON
|
{
|
||
|
|
"id": "guide/dynamic-form",
|
||
|
|
"title": "Building dynamic forms",
|
||
|
|
"contents": "\n\n\n<div class=\"github-links\">\n <a href=\"https://github.com/angular/angular/edit/master/aio/content/guide/dynamic-form.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-dynamic-forms\">Building dynamic forms<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/dynamic-form#building-dynamic-forms\"><i class=\"material-icons\">link</i></a></h1>\n<p>Many forms, such as questionaires, can be very similar to one another in format and intent.\nTo make it faster and easier to generate different versions of such a form,\nyou can create a <em>dynamic form template</em> based on metadata that describes the business object model.\nYou can then use the template to generate new forms automatically, according to changes in the data model.</p>\n<p>The technique is particularly useful when you have a type of form whose content must\nchange frequently to meet rapidly changing business and regulatory requirements.\nA typical use case is a questionaire. You might need to get input from users in different contexts.\nThe format and style of the forms a user sees should remain constant, while the actual questions you need to ask vary with the context.</p>\n<p>In this tutorial you will build a dynamic form that presents a basic questionaire.\nYou will build an online application for heroes seeking employment.\nThe agency is constantly tinkering with the application process, but by using the dynamic form\nyou can create the new forms on the fly without changing the application code.</p>\n<p>The tutorial walks you through the following steps.</p>\n<ol>\n<li>Enable reactive forms for a project.</li>\n<li>Establish a data model to represent form controls.</li>\n<li>Populate the model with sample data.</li>\n<li>Develop a component to create form controls dynamically.</li>\n</ol>\n<p>The form you create uses input validation and styling to improve the user experience.\nIt has a Submit button that is only enabled when all user input is valid, and flags invalid input with color coding and error messages.</p>\n<p>The basic version can evolve to support a richer variety of questions, more graceful rendering, and superior user experience.</p>\n<div class=\"alert is-helpful\">\n<p>See the <live-example name=\"dynamic-form\"></live-example>.</p>\n</div>\n<h2 id=\"prerequisites\">Prerequisites<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/dynamic-form#prerequisites\"><i class=\"material-icons\">link</i></a></h2>\n<p>Before doing this tutorial, you should have a basic understanding to 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>Fundamental concepts of <a href=\"guide/architecture\" title=\"Introduction to Angular app-design concepts\">Angular app design</a>.</p>\n</li>\n<li>\n<p>Basic knowledge of <a href=\"guide/reactive-forms\" title=\"Reactive forms guide\">reactive forms</a>.</p>\n</li>\n</ul>\n<h2 id=\"enable-reactive-forms-for-your-project\">Enable reactive forms for your project<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/dynamic-form#enable-reactive-forms-for-your-project\"><i class=\"material-icons\">link</i></a></h2>\n<p>Dynamic forms are based on reactive forms. To give the application access reactive forms directives, the <a href=\"guide/bootstrapping\" title=\"Learn about bootstrapping an app from the root module.\">root module</a> imports <code><a href=\"api/forms/ReactiveFormsModule\" class=\"code-anchor\">ReactiveFormsModule</a></code> from the <code>@angular/forms</code> library.</p>\n<p>The following code from the example shows the setup in the root module.</p>\n<code-tabs>\n\n <code-pane header=\"app.module.ts\" path=\"dynamic-form/src/app/app.module.ts\">\nimport { <a href=\"api
|
||
|
|
}
|