diff --git a/aio/content/examples/getting-started/src/app/cart/cart.component.1.ts b/aio/content/examples/getting-started/src/app/cart/cart.component.1.ts index c9276d4d36..f66cc6c971 100644 --- a/aio/content/examples/getting-started/src/app/cart/cart.component.1.ts +++ b/aio/content/examples/getting-started/src/app/cart/cart.component.1.ts @@ -1,15 +1,12 @@ -import { Component, OnInit } from '@angular/core'; +import { Component } from '@angular/core'; @Component({ selector: 'app-cart', templateUrl: './cart.component.html', styleUrls: ['./cart.component.css'] }) -export class CartComponent implements OnInit { +export class CartComponent { constructor() { } - ngOnInit() { - } - } diff --git a/aio/content/examples/getting-started/src/app/cart/cart.component.2.ts b/aio/content/examples/getting-started/src/app/cart/cart.component.2.ts index 8615c5a391..459a442fae 100644 --- a/aio/content/examples/getting-started/src/app/cart/cart.component.2.ts +++ b/aio/content/examples/getting-started/src/app/cart/cart.component.2.ts @@ -12,7 +12,7 @@ import { CartService } from '../cart.service'; // #docregion inject-cart, items, submit export class CartComponent { // #enddocregion inject-cart - items; + items = this.cartService.getItems(); // #docregion inject-cart constructor( diff --git a/aio/content/examples/getting-started/src/app/cart/cart.component.3.ts b/aio/content/examples/getting-started/src/app/cart/cart.component.3.ts index fc44540f4d..b689d9a966 100644 --- a/aio/content/examples/getting-started/src/app/cart/cart.component.3.ts +++ b/aio/content/examples/getting-started/src/app/cart/cart.component.3.ts @@ -17,7 +17,7 @@ export class CartComponent implements OnInit { private cartService: CartService ) { } - ngOnInit() { + ngOnInit(): void { this.items = this.cartService.getItems(); } } diff --git a/aio/content/examples/getting-started/src/app/cart/cart.component.html b/aio/content/examples/getting-started/src/app/cart/cart.component.html index b2b825c694..7fa7ccc8a5 100644 --- a/aio/content/examples/getting-started/src/app/cart/cart.component.html +++ b/aio/content/examples/getting-started/src/app/cart/cart.component.html @@ -12,7 +12,7 @@ -
+
diff --git a/aio/content/examples/getting-started/src/app/cart/cart.component.ts b/aio/content/examples/getting-started/src/app/cart/cart.component.ts index a076868145..a0cb31c217 100644 --- a/aio/content/examples/getting-started/src/app/cart/cart.component.ts +++ b/aio/content/examples/getting-started/src/app/cart/cart.component.ts @@ -1,6 +1,6 @@ // #docplaster // #docregion imports -import { Component, OnInit } from '@angular/core'; +import { Component } from '@angular/core'; import { FormBuilder } from '@angular/forms'; import { CartService } from '../cart.service'; @@ -12,37 +12,27 @@ import { CartService } from '../cart.service'; styleUrls: ['./cart.component.css'] }) // #docregion props-services, submit, inject-form-builder, checkout-form, checkout-form-group -export class CartComponent implements OnInit { - items; -// #enddocregion inject-form-builder - checkoutForm; +export class CartComponent { + // #enddocregion inject-form-builder + items = this.cartService.getItems(); + checkoutForm = this.formBuilder.group({ + name: '', + address: '' + }); // #enddocregion checkout-form // #docregion inject-form-builder - constructor( private cartService: CartService, private formBuilder: FormBuilder, - ) { -// #enddocregion inject-form-builder - this.checkoutForm = this.formBuilder.group({ - name: '', - address: '' - }); -// #docregion inject-form-builder - } - - ngOnInit() { - this.items = this.cartService.getItems(); - } + ) {} // #enddocregion inject-form-builder, checkout-form-group // #enddocregion props-services - onSubmit(customerData) { + onSubmit(): void { // Process checkout data here this.items = this.cartService.clearCart(); + console.warn('Your order has been submitted', this.checkoutForm.value); this.checkoutForm.reset(); - - console.warn('Your order has been submitted', customerData); } // #docregion props-services, inject-form-builder, checkout-form, checkout-form-group } diff --git a/aio/content/examples/getting-started/src/app/shipping/shipping.component.1.ts b/aio/content/examples/getting-started/src/app/shipping/shipping.component.1.ts index 3bbacae6bd..fc3763e925 100644 --- a/aio/content/examples/getting-started/src/app/shipping/shipping.component.1.ts +++ b/aio/content/examples/getting-started/src/app/shipping/shipping.component.1.ts @@ -1,15 +1,12 @@ -import { Component, OnInit } from '@angular/core'; +import { Component } from '@angular/core'; @Component({ selector: 'app-shipping', templateUrl: './shipping.component.html', styleUrls: ['./shipping.component.css'] }) -export class ShippingComponent implements OnInit { +export class ShippingComponent { constructor() { } - ngOnInit() { - } - } diff --git a/aio/content/examples/getting-started/src/app/shipping/shipping.component.ts b/aio/content/examples/getting-started/src/app/shipping/shipping.component.ts index 95a58b6f1b..b34536245b 100644 --- a/aio/content/examples/getting-started/src/app/shipping/shipping.component.ts +++ b/aio/content/examples/getting-started/src/app/shipping/shipping.component.ts @@ -1,6 +1,6 @@ // #docplaster // #docregion imports -import { Component, OnInit } from '@angular/core'; +import { Component } from '@angular/core'; import { CartService } from '../cart.service'; // #enddocregion @@ -11,20 +11,17 @@ import { CartService } from '../cart.service'; styleUrls: ['./shipping.component.css'] }) // #docregion props, ctor -export class ShippingComponent implements OnInit { - shippingCosts; +export class ShippingComponent { + shippingCosts = this.cartService.getShippingPrices(); // #enddocregion props + + // #docregion inject-cart-service - constructor( - private cartService: CartService - ) { + constructor(private cartService: CartService) { } // #enddocregion inject-cart-service - ngOnInit() { - this.shippingCosts = this.cartService.getShippingPrices(); - } // #docregion props } diff --git a/aio/content/start/start-data.md b/aio/content/start/start-data.md index c39b5a11a2..fe240eb0a4 100644 --- a/aio/content/start/start-data.md +++ b/aio/content/start/start-data.md @@ -106,6 +106,8 @@ For customers to see their cart, you can create the cart view in two steps: + StackBlitz also generates an `ngOnInit()` by default in components. You can ignore the `CartComponent` `ngOnInit()` for this tutorial. + 1. Open `app.module.ts` and add a route for the component `CartComponent`, with a `path` of `cart`. @@ -144,13 +146,8 @@ This section shows you how to use the cart service to display the products in th -1. Set the items using the `CartService` `getItems()` method. + This code sets the items using the `CartService` `getItems()` method. You defined this method [when you created `cart.service.ts`](#generate-cart-service). - By using the `getItems()` method in Angular's `ngOnInit()`, Angular uses `getItems()` upon initialization of `CartComponent`. - The resulting `CartComponent` class is as follows. - - - 1. Update the cart template with a header, and use a `
` with an `*ngFor` to display each of the cart items with its name and price. The resulting `CartComponent` template is as follows. @@ -251,17 +248,13 @@ This section guides you through modifying the `ShippingComponent` to retrieve sh -1. Define a `shippingCosts` property. - - - 1. Inject the cart service in the `ShippingComponent` `constructor()`. -1. Set the `shippingCosts` property using the `getShippingPrices()` method from the `CartService`. +1. Define a `shippingCosts` property that sets the `shippingCosts` property using the `getShippingPrices()` method from the `CartService`. - + 1. Update the `ShippingComponent` template to display the shipping types and prices using the `async` pipe. diff --git a/aio/content/start/start-forms.md b/aio/content/start/start-forms.md index b1981df4fc..a8a5b88c33 100644 --- a/aio/content/start/start-forms.md +++ b/aio/content/start/start-forms.md @@ -1,61 +1,48 @@ # Using forms for user input -At the end of [Managing Data](start/start-data "Try it: Managing Data"), the online store application has a product catalog and a shopping cart. +This guide builds on the [Managing Data](start/start-data "Try it: Managing Data") step of the Getting Started tutorial, [Get started with a basic Angular app](start "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. -## Forms in Angular - -Forms in Angular build upon the standard HTML forms to help you create custom form controls and easy validation experiences. There are two parts to an Angular Reactive form: the objects that live in the component to store and manage the form, and the visualization of the form that lives in the template. - ## Define the checkout form model -First, set up the checkout form model. Defined in the component class, the form model is the source of truth for the status of the form. +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`. -1. Angular's `FormBuilder` service provides convenient methods for generating controls. As with the other services you've used, you need to import and inject the service before you can use it: +1. Import the `FormBuilder` service from the `@angular/forms` package. + This service provides convenient methods for generating controls. - 1. Import the `FormBuilder` service from the `@angular/forms` package. + + - - +1. Inject the `FormBuilder` service in the `CartComponent` `constructor()`. + This service is part of the `ReactiveFormsModule` module, which you've already imported. - The `ReactiveFormsModule` provides the `FormBuilder` service, which `AppModule` (in `app.module.ts`) already imports. + + - 1. Inject the `FormBuilder` service. +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. Still in the `CartComponent` class, define the `checkoutForm` property to store the form model. +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: -1. To gather the user's name and address, set the `checkoutForm` property with a form model containing `name` and `address` fields, using the `FormBuilder` `group()` method. Add this between the curly braces, `{}`, -of the constructor. - - - -1. For the checkout process, users need to submit their name and address. When they submit their order, the form should reset and the cart should clear. - - 1. In `cart.component.ts`, define an `onSubmit()` method to process the form. Use the `CartService` `clearCart()` method to empty the cart items and reset the form after its submission. In a real-world app, this method would also submit the data to an external server. The entire cart component class is as follows: - - - - -Now that you've defined the form model in the component class, you need a checkout form to reflect the model in the view. + + ## Create the checkout form -Use the following steps to add a checkout form at the bottom of the "Cart" view. +Use the following steps to add a checkout form at the bottom of the Cart view. -1. Open `cart.component.html`. +1. At the bottom of `cart.component.html`, add an HTML `` element and a **Purchase** button. -1. At the bottom of the template, add an HTML form to capture user information. - -1. Use a `formGroup` property binding to bind the `checkoutForm` to the `form` tag in the template. Also include a "Purchase" button to submit the form. +1. Use a `formGroup` property binding to bind `checkoutForm` to the HTML ``. @@ -65,21 +52,24 @@ Use the following steps to add a checkout form at the bottom of the "Cart" view. -1. Add input fields for `name` and `address`. Use the `formControlName` attribute binding to bind the `checkoutForm` form controls for `name` and `address` to their input fields. The final complete component is as follows: +1. Add `` fields for `name` and `address`, each with a `formControlName` attribute that binds to the `checkoutForm` form controls for `name` and `address` to their `` fields. + The complete component is as follows: -After putting a few items in the cart, users can now review their items, enter their name and address, and submit their purchase: +After putting a few items in the cart, users can review their items, enter their name and address, and submit their purchase. -To confirm submission, open the console where you should see an object containing the name and address you submitted. +To confirm submission, open the console to see an object containing the name and address you submitted. -## Next steps +
-Congratulations! You have a complete online store application with a product catalog, a shopping cart, and a checkout function. +## 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](start/start-deployment "Try it: Deployment") to move to local development, or deploy your app to Firebase or your own server.