{ "id": "start/start-forms", "title": "Using forms for user input", "contents": "\n\n\n
\n mode_edit\n
\n\n\n
\n

Using forms for user inputlink

\n

This guide builds on the Managing Data step of the Getting Started tutorial, Get started with a basic Angular app.

\n

This section walks you through adding a form-based checkout feature to collect user information as part of checkout.

\n

Define the checkout form modellink

\n

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.

\n
    \n
  1. \n

    Open cart.component.ts.

    \n
    2. \n
  2. \n

    Import the FormBuilder service from the @angular/forms package.\nThis service provides convenient methods for generating controls.

    \n\nimport { Component } from '@angular/core';\nimport { FormBuilder } from '@angular/forms';\n\nimport { CartService } from '../cart.service';\n\n\n
    3. \n
  3. \n

    Inject the FormBuilder service in the CartComponent constructor().\nThis service is part of the ReactiveFormsModule module, which you've already imported.

    \n\nexport class CartComponent {\n constructor(\n private cartService: CartService,\n private formBuilder: FormBuilder,\n ) {}\n}\n\n\n\n
    4. \n
  4. \n

    To gather the user's name and address, use the FormBuilder group() method to set the checkoutForm property to a form model containing name and address fields.

    \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: FormBuilder,\n ) {}\n}\n\n\n\n
    5. \n
  5. \n

    Define an onSubmit() method to process the form.\nThis method allows users to submit their name and address.\nIn addition, this method uses the clearCart() method of the CartService to reset the form and clear the cart.

    \n

    The entire cart component class is as follows:

    \n\nimport { Component } from '@angular/core';\nimport { FormBuilder } from '@angular/forms';\n\nimport { CartService } from '../cart.service';\n\n@Component({\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: FormBuilder,\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\n
    6. \n
\n

Create the checkout formlink

\n

Use the following steps to add a checkout form at the bottom of the Cart view.

\n
    \n
  1. \n

    At the bottom of cart.component.html, add an HTML <form> element and a Purchase button.

    \n
    2. \n
  2. \n

    Use a formGroup property binding to bind checkoutForm to the HTML <form>.

    \n\n<form [formGroup]=\"checkoutForm\">\n\n <button class=\"button\" type=\"submit\">Purchase</button>\n\n</form>\n\n\n
    3. \n
  3. \n

    On the form tag, use an ngSubmit event binding to listen for the form submission and call the onSubmit() method with the checkoutForm value.

    \n\n<form [formGroup]=\"checkoutForm\" (ngSubmit)=\"onSubmit()\">\n</form>\n\n\n\n
    4. \n
  4. \n

    Add <input> fields for name and address, each with a formControlName attribute that binds to the checkoutForm form controls for name and address to their <input> fields.\nThe complete component is as follows:

    \n\n<h3>Cart</h3>\n\n<p>\n <a routerLink=\"/shipping\">Shipping Prices</a>\n</p>\n\n<div class=\"cart-item\" *ngFor=\"let item of items\">\n <span>{{ item.name }} </span>\n <span>{{ item.price | currency }}</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\" formControlName=\"name\">\n </div>\n\n <div>\n <label for=\"address\">\n Address\n </label>\n <input id=\"address\" type=\"text\" formControlName=\"address\">\n </div>\n\n <button class=\"button\" type=\"submit\">Purchase</button>\n\n</form>\n\n\n\n
    5. \n
\n

After putting a few items in the cart, users can review their items, enter their name and address, and submit their purchase.

\n
\n \"Cart\n
\n

To confirm submission, open the console to see an object containing the name and address you submitted.

\n

What's nextlink

\n

You have a complete online store application with a product catalog, a shopping cart, and a checkout function.

\n

Continue to the \"Deployment\" section to move to local development, or deploy your app to Firebase or your own server.

\n\n \n
\n\n\n" }