表单

Forms

当管理数据结束时，这个在线商店应用有了一个商品名录和一个购物车。

At the end of Managing Data, the online store application has a product catalog and a shopping cart.

本节将带你通过添加基于表单的结帐功能来完成该应用。你还将创建一个表单来收集用户信息，作为结账过程的一部分。

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

Angular 中的表单

Forms in Angular

Angular 中的表单建立在标准 HTML 表单功能之上，以帮助你创建自定义表单控件和轻松的验证体验。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

首先，你要设置一个结账的表单模型。在组件类中定义它，把它作为表单状态的真相之源（source of truth）。

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.

打开 cart.component.ts。
Open cart.component.ts.
Angular 的 FormBuilder 服务为生成控件提供了方便的方法。和你使用过的其它服务一样，你需要导入并注入该服务，然后才能使用它：
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. 从 @angular/forms 包中导入 FormBuilder 服务。
  Import the FormBuilder service from the @angular/forms package.
  import { Component, OnInit } from '@angular/core'; import { FormBuilder } from '@angular/forms'; import { CartService } from '../cart.service';
  src/app/cart/cart.component.ts
```
      
      import { Component, OnInit } from '@angular/core';
import { FormBuilder } from '@angular/forms';

import { CartService } from '../cart.service';
    
```
  ReactiveFormsModule 中提供了 FormBuilder 服务，它已经在之前修改过的 AppModule（位于 app.module.ts ）中导入过了。
  The ReactiveFormsModule provides the FormBuilder service, which AppModule (in app.module.ts) already imports.
2. 注入这个 FormBuilder 服务。
  Inject the FormBuilder service.
  export class CartComponent implements OnInit { items; constructor( private cartService: CartService, private formBuilder: FormBuilder, ) { } ngOnInit() { this.items = this.cartService.getItems(); } }
  src/app/cart/cart.component.ts
```
      
      export class CartComponent implements OnInit {
  items;

  constructor(
    private cartService: CartService,
    private formBuilder: FormBuilder,
  ) {
  }

  ngOnInit() {
    this.items = this.cartService.getItems();
  }
}
    
```
还是在 CartComponent 类中，定义 checkoutForm 属性来存储表单模型。
Still in the CartComponent class, define the checkoutForm property to store the form model.
export class CartComponent implements OnInit { items; checkoutForm; }
src/app/cart/cart.component.ts
```
      
      export class CartComponent implements OnInit {
  items;
  checkoutForm;
}
    
```
要想手机用户的姓名和地址，把 checkoutForm 属性设置为一个包含 name 和 address 字段的表单模型。使用 FormBuilder 的 group() 方法来创建它，把该语句加入构造函数的花括号 {} 中间。
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.
export class CartComponent implements OnInit { items; checkoutForm; constructor( private cartService: CartService, private formBuilder: FormBuilder, ) { this.checkoutForm = this.formBuilder.group({ name: '', address: '' }); } ngOnInit() { this.items = this.cartService.getItems(); } }
src/app/cart/cart.component.ts
```
      
      export class CartComponent implements OnInit {
  items;
  checkoutForm;

  constructor(
    private cartService: CartService,
    private formBuilder: FormBuilder,
  ) {
    this.checkoutForm = this.formBuilder.group({
      name: '',
      address: ''
    });
  }

  ngOnInit() {
    this.items = this.cartService.getItems();
  }
}
    
```
在结帐过程中，用户要提交他们的姓名和地址。在提交订单之后，表单应该重置，购物车应该清空。
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. 在 cart.component.ts 中，定义一个 onSubmit() 方法来处理表单。使用 CartService clearCart() 方法清空购物车项目，并在提交完之后重置该表单。在实际应用中，此方法也会把数据提交给外部服务器。整个购物车组件类如下所示：
  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 it is 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:
import { Component, OnInit } from '@angular/core'; import { FormBuilder } from '@angular/forms'; import { CartService } from '../cart.service'; @Component({ selector: 'app-cart', templateUrl: './cart.component.html', styleUrls: ['./cart.component.css'] }) export class CartComponent implements OnInit { items; checkoutForm; constructor( private cartService: CartService, private formBuilder: FormBuilder, ) { this.checkoutForm = this.formBuilder.group({ name: '', address: '' }); } ngOnInit() { this.items = this.cartService.getItems(); } onSubmit(customerData) { // Process checkout data here console.warn('Your order has been submitted', customerData); this.items = this.cartService.clearCart(); this.checkoutForm.reset(); } }
src/app/cart/cart.component.ts
```
      
      import { Component, OnInit } from '@angular/core';
import { FormBuilder } from '@angular/forms';

import { CartService } from '../cart.service';

@Component({
  selector: 'app-cart',
  templateUrl: './cart.component.html',
  styleUrls: ['./cart.component.css']
})
export class CartComponent implements OnInit {
  items;
  checkoutForm;

  constructor(
    private cartService: CartService,
    private formBuilder: FormBuilder,
  ) {
    this.checkoutForm = this.formBuilder.group({
      name: '',
      address: ''
    });
  }

  ngOnInit() {
    this.items = this.cartService.getItems();
  }

  onSubmit(customerData) {
    // Process checkout data here
    console.warn('Your order has been submitted', customerData);

    this.items = this.cartService.clearCart();
    this.checkoutForm.reset();
  }
}
    
```

现在，你已经在组件类中定义了表单模型，还要创建一个结账表单，以便把该模型映射到视图中。

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" page.

打开 cart.component.html。
Open cart.component.html.
在模板的底部，添加一个空的 HTML 表单来捕获用户信息。
At the bottom of the template, add an HTML form to capture user information.
使用 formGroup 属性绑定把 checkoutForm 绑定到模板中的 form 标签上。还要提供一个 “Purchase” 按钮来提交表单。
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.
<form [formGroup]="checkoutForm"> <button class="button" type="submit">Purchase</button> </form>
src/app/cart/cart.component.html
```
      
      <form [formGroup]="checkoutForm">

  <button class="button" type="submit">Purchase</button>

</form>
    
```
在 form 标签上，使用 ngSubmit 事件绑定来监听表单提交，并使用 checkoutForm 值调用 onSubmit() 方法。
On the form tag, use an ngSubmit event binding to listen for the form submission and call the onSubmit() method with the checkoutForm value.
<form [formGroup]="checkoutForm" (ngSubmit)="onSubmit(checkoutForm.value)"> </form>
src/app/cart/cart.component.html (cart component template detail)
```
      
      <form [formGroup]="checkoutForm" (ngSubmit)="onSubmit(checkoutForm.value)">
</form>
    
```
为 name 和 address 添加输入字段。使用 formControlName 属性绑定来把 checkoutForm 表单控件中的 name 和 address 绑定到它们的输入字段。最终的完整版组件如下：
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:
<h3>Cart</h3> <p> <a routerLink="/shipping">Shipping Prices</a> </p> <div class="cart-item" *ngFor="let item of items"> <span>{{ item.name }} </span> <span>{{ item.price | currency }}</span> </div> <form [formGroup]="checkoutForm" (ngSubmit)="onSubmit(checkoutForm.value)"> <div> <label for="name"> Name </label> <input id="name" type="text" formControlName="name"> </div> <div> <label for="address"> Address </label> <input id="address" type="text" formControlName="address"> </div> <button class="button" type="submit">Purchase</button> </form>
src/app/cart/cart.component.html
```
      
      <h3>Cart</h3>

<p>
  <a routerLink="/shipping">Shipping Prices</a>
</p>

<div class="cart-item" *ngFor="let item of items">
  <span>{{ item.name }} </span>
  <span>{{ item.price | currency }}</span>
</div>

<form [formGroup]="checkoutForm" (ngSubmit)="onSubmit(checkoutForm.value)">

  <div>
    <label for="name">
      Name
    </label>
    <input id="name" type="text" formControlName="name">
  </div>

  <div>
    <label for="address">
      Address
    </label>
    <input id="address" type="text" formControlName="address">
  </div>

  <button class="button" type="submit">Purchase</button>

</form>
    
```

往购物车中放入几件商品之后，用户可以查看这些商品，输入自己的姓名和地址，进行购买：

After putting a few items in the cart, users can now 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.

下一步

Next steps

恭喜！你有了一个完整的在线商店应用，它具有商品名录，购物车和结账功能。

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

继续浏览“部署”部分，把你的应用转移到本地开发、部署到 Firebase 或你自己的服务器。

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

表单link

Formslink

Angular 中的表单link

Forms in Angularlink

定义结帐的表单模型link

Define the checkout form modellink

创建结帐表单link

Create the checkout formlink

下一步link

Next stepslink

表单