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=\"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@<a href=\"api/core/Component\" class=\"code-anchor\">Component</a>({\n selector: 'app-cart',\n templateUrl: './cart.component.html',\n styleUrls: ['./cart.component.css']\n})\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 onSubmit(): void {\n // Process checkout data here\n this.items = this.cartService.clearCart();\n console.warn('Your order has been submitted', this.checkoutForm.value);\n this.checkoutForm.reset();\n }\n}\n\n\n</code-example>\n</li>\n</ol>\n<h2 id=\"create-the-checkout-form\">Create the checkout form<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"start/start-forms#create-the-checkout-form\"><i class=\"material-icons\">link</i></a></h2>\n<p>Use the following steps to add a checkout form at the bottom of the Cart view.</p>\n<ol>\n<li>\n<p>At the bottom of <code>cart.component.html</code>, add an HTML <code><form></code> element and a <strong>Purchase</strong> button.</p>\n</li>\n<li>\n<p>Use a <code>formGroup</code> property binding to bind <code>checkoutForm</code> to the HTML <code><form></code>.</p>\n<code-example header=\"src/app/cart/cart.component.html\" path=\"getting-started/src/app/cart/cart.component.3.html\" region=\"checkout-form\">\n<form [formGroup]=\"checkoutForm\">\n\n <button class=\"button\" type=\"submit\">Purchase</button>\n\n</form>\n\n</code-example>\n</li>\n<li>\n<p>On the <code>form</code> tag, use an <code>ngSubmit</code> event binding to listen for the form submission and call the <code>onSubmit()</code> method with the <code>checkoutForm</code> value.</p>\n<code-example path=\"getting-started/src/app/cart/cart.component.html\" header=\"src/app/cart/cart.component.html (cart component template detail)\" region=\"checkout-form-1\">\n<form [formGroup]=\"checkoutForm\" (ngSubmit)=\"onSubmit()\">\n</form>\n\n\n</code-example>\n</li>\n<li>\n<p>Add <code><input></code> fields for <code>name</code> and <code>address</code>, each with a <code><a href=\"api/forms/FormControlName\" class=\"code-anchor\">formControlName</a></code> attribute that binds to the <code>checkoutForm</code> form controls for <code>name</code> and <code>address</code> to their <code><input></code> fields.\nThe complete component is as follows:</p>\n<code-example path=\"getting-started/src/app/cart/cart.component.html\" header=\"src/app/cart/cart.component.html\" region=\"checkout-form-2\">\n<h3>Cart</h3>\n\n<p>\n <a <a href=\"api/router/RouterLink\" class=\"code-anchor\">routerLink</a>=\"/shipping\">Shipping Prices</a>\n</p>\n\n<div class=\"cart-item\" *<a href=\"api/common/NgForOf\" class=\"code-anchor\">ngFor</a>=\"let item of items\">\n <span>{{ item.name }} </span>\n <span>{{ item.price | <a href=\"api/common/CurrencyPipe\" class=\"code-anchor\">currency</a> }}</span>\n</div>\n\n<form [formGroup]=\"checkoutForm\" (ngSubmit)=\"onSubmit()\">\n\n <div>\n <label for=\"name\">\n Name\n </label>\n <input id=\"name\" type=\"text\" <a href=\"api/forms/FormControlName\" class=\"code-anchor\">formControlName</a>=\"name\">\n </div>\n\n <div>\n <label for=\"address\">\n Address\n </label>\n <input id=\"address\" type=\"text\" <a href=\"api/forms/FormControlName\" class=\"code-anchor\">formControlName</a>=\"address\">\n </div>\n\n <button class=\"button\" type=\"submit\">Purchase</button>\n\n</form>\n\n\n</code-example>\n</li>\n</ol>\n<p>After putting a few items in the cart, users can review their items, enter their name and address, and submit their purchase.</p>\n<div class=\"lightbox\">\n <img src=\"generated/images/guide/start/cart-with-items-and-form.png\" alt=\"Cart view with checkout form\" width=\"261\" height=\"395\">\n</div>\n<p>To confirm submission, open the console to see an object containing the name and address you submitted.</p>\n<h2 id=\"whats-next\">What's next<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"start/start-forms#whats-next\"><i class=\"material-icons\">link</i></a></h2>\n<p>You have a complete online store application with a product catalog, a shopping cart, and a checkout function.</p>\n<p><a href=\"start/start-deployment\" title=\"Try it: Deployment\">Continue to the \"Deployment\" section</a> to move to local development, or deploy your app to Firebase or your own server.</p>\n\n \n</div>\n\n<!-- links to this doc:\n - start/start-data\n-->\n<!-- links from this doc:\n - api/common/CurrencyPipe\n - api/common/NgForOf\n - api/core/Component\n - api/forms/FormBuilder\n - api/forms/FormControlName\n - api/forms/ReactiveFormsModule\n - api/router/RouterLink\n - start\n - start/start-data\n - start/start-deployment\n - start/start-forms#create-the-checkout-form\n - start/start-forms#define-the-checkout-form-model\n - start/start-forms#using-forms-for-user-input\n - start/start-forms#whats-next\n - https://github.com/angular/angular/edit/master/aio/content/start/start-forms.md?message=docs%3A%20describe%20your%20change...\n-->"
|
|
} |