Elgato_dark/angular
1
0
Fork 0
mirror of https://github.com/angular/angular synced 2026-05-24 09:28:37 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1
angular/aio/content/start/start-forms.md
Joe Martin (Crowdstaffing) 42289f25c6 docs: improve markdown (#45325) 
The purpose of the changes is to clean all markdown to match a single pedantic style.

*   To ensure all changes in style are properly separated.
*   To ensure all styled content aligns to nearest 4-character-tab.
*   To ensure all code blocks use the Angular `<code-example>` or `<code-tab>` elements.
*   To ensure all markdown exists outside of html tags.
*   To ensure all images use the Angular style for `<img>` elements.
*   To ensure that all smart punctuation is replaced or removed.

    ```text
    ’, ’, “, ”, –, —, …
    ```

*   To ensure all content does not conflict with the following reserved characters.

    ```text
    @, $, *, &, #, |, <, >,
    ```

*   To ensure all content displays using html entities.

The following changes were made to files in the following directory.

```text
aio/content
```

The target files were markdown files.
The list of excluded files:

```text
.browserslistrc, .css, .conf, .editorconfig, .gitignore, .html, .js, .json, .sh, .svg, .ts, .txt, .xlf,
```

PR Close #45325
2022-04-08 19:36:30 +00:00

3.7 KiB
Raw Blame History

Using forms for user input

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

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

Define the checkout form model

This step shows you how to set up the checkout form model in the component class. The form model determines the status of the form.

  1. Open cart.component.ts.

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

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

  1. 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.

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

The entire cart component class is as follows:

Create the checkout form

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

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

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

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

  1. 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. The complete component is as follows:

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

Cart view with checkout form

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

What's next

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

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

@reviewed 2021-09-15