5 lines
9.6 KiB
JSON
5 lines
9.6 KiB
JSON
|
{
|
||
|
|
"id": "start/start-forms",
|
||
|
|
"title": "Using forms for user input",
|
||
|
|
"contents": "\n\n\n<div class=\"github-links\">\n <a href=\"https://github.com/angular/angular/edit/master/aio/content/start/start-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=\"using-forms-for-user-input\">Using forms for user input<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"start/start-forms#using-forms-for-user-input\"><i class=\"material-icons\">link</i></a></h1>\n<p>This guide builds on the <a href=\"start/start-data\" title=\"Try it: Managing Data\">Managing Data</a> step of the Getting Started tutorial, <a href=\"start\" title=\"Get started with a basic Angular app\">Get started with a basic Angular app</a>.</p>\n<p>This section walks you through adding a form-based checkout feature to collect user information as part of checkout.</p>\n<h2 id=\"define-the-checkout-form-model\">Define the checkout form model<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"start/start-forms#define-the-checkout-form-model\"><i class=\"material-icons\">link</i></a></h2>\n<p>This step shows you how to set up the checkout form model in the component class.\nThe form model determines the status of the form.</p>\n<ol>\n<li>\n<p>Open <code>cart.component.ts</code>.</p>\n</li>\n<li>\n<p>Import the <code><a href=\"api/forms/FormBuilder\" class=\"code-anchor\">FormBuilder</a></code> service from the <code>@angular/forms</code> package.\nThis service provides convenient methods for generating controls.</p>\n<code-example header=\"src/app/cart/cart.component.ts\" path=\"getting-started/src/app/cart/cart.component.ts\" region=\"imports\">\nimport { <a href=\"api/core/Component\" class=\"code-anchor\">Component</a> } from '@angular/core';\nimport { <a href=\"api/forms/FormBuilder\" class=\"code-anchor\">FormBuilder</a> } from '@angular/forms';\n\nimport { CartService } from '../cart.service';\n\n</code-example>\n</li>\n<li>\n<p>Inject the <code><a href=\"api/forms/FormBuilder\" class=\"code-anchor\">FormBuilder</a></code> service in the <code>CartComponent</code> <code>constructor()</code>.\nThis service is part of the <code><a href=\"api/forms/ReactiveFormsModule\" class=\"code-anchor\">ReactiveFormsModule</a></code> module, which you've already imported.</p>\n<code-example header=\"src/app/cart/cart.component.ts\" path=\"getting-started/src/app/cart/cart.component.ts\" region=\"inject-form-builder\">\nexport class CartComponent {\n constructor(\n private cartService: CartService,\n private formBuilder: <a href=\"api/forms/FormBuilder\" class=\"code-anchor\">FormBuilder</a>,\n ) {}\n}\n\n\n</code-example>\n</li>\n<li>\n<p>To gather the user's name and address, use the <code><a href=\"api/forms/FormBuilder\" class=\"code-anchor\">FormBuilder</a></code> <code>group()</code> method to set the <code>checkoutForm</code> property to a form model containing <code>name</code> and <code>address</code> fields.</p>\n<code-example header=\"src/app/cart/cart.component.ts\" path=\"getting-started/src/app/cart/cart.component.ts\" region=\"checkout-form-group\">\nexport class CartComponent {\n items = this.cartService.getItems();\n checkoutForm = this.formBuilder.group({\n name: '',\n address: ''\n });\n constructor(\n private cartService: CartService,\n private formBuilder: <a href=\"api/forms/FormBuilder\" class=\"code-anchor\">FormBuilder</a>,\n ) {}\n}\n\n\n</code-example>\n</li>\n<li>\n<p>Define an <code>onSubmit()</code> method to process the form.\nThis method allows users to submit their name and address.\nIn addition, this method uses the <code>clearCart()</code> method of the <code>CartService</code> to reset the form and clear the cart.</p>\n<p>The entire cart component class is as follows:</p>\n<code-example header=\"src/app/cart/cart.component.ts\" path=\"getting-started/src/app/cart/cart.component.ts\">\nimport { <a href=\"api/core/Component\" class=\"c
|
||
|
|
}
|