10. 表单

1. 定义结账表单模型

FormBuilder 服务为出创建控件提供了方便。

• 1. 导入 FormBuilder 服务 from '@angular/forms'
• 2. 注入FormBuilder 服务到构造函数
• 3. 定义 checkoutForm 属性存储form model
• 4. 在结帐时，该应用会提示用户输入姓名和地址。这样你接下来就可以收集到这些信息了。可以使用 FormBuilder#group() 方法，用一个包含 name 和 address 字段的表单模型赋值给 checkoutForm 属性。
     对于结帐过程，用户需要能够提交表单数据（他们的姓名和地址）。在提交订单之后，表单应该重置，购物车应该清空。
• 5. 在 cart.component.ts 中，定义一个 onSubmit() 方法来处理表单。使用 CartService#clearCart() 方法清空购物车项目，并在提交完之后重置该表单。（在实际应用中，此方法也会把数据提交给外部服务器。）

---

》 cart.component.ts

---

import  {  Component }  from  '@angular/core';  
import  {  FormBuilder  }  from  '@angular/forms'; 
import  {  CartService  }  from  '../cart.service';
export  class  CartComponent  {
items; 
checkoutForm;
constructor(  
private cartService:  CartService,  
private formBuilder:  FormBuilder, 
 )  { 
this.items = this.cartService.getItems();
this.checkoutForm = this.formBuilder.group({
      name: '',
      address: ''
    });
 }  
onSubmit(customerData) {
    // Process checkout data here
    console.warn('Your order has been submitted', customerData);
    this.items = this.cartService.clearCart();
    this.checkoutForm.reset();
  }
}

2. 在 checkout form

• 1. 在模板底部，增加一个空的html 表单捕捉用户信息
• 2. 用 formGroup 属性绑定checkoutForm 到模板的form 标签。同时包含一个“Purchase” 按钮提交表单
• 3. 在 form 标签上，使用 ngSubmit 事件绑定来监听表单提交，并使用 checkoutForm 值调用 onSubmit() 方法。
• 4. 为 name 和 address 添加输入字段。使用 formControlName 属性绑定来把 checkoutForm 表单控件中的 name 和 address 绑定到它们的输入字段。

---

》 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>
 <div>
 <label>Name</label>
  <input  type="text"  formControlName="name">
 </div>
<div> 
 <label>Address</label>
 <input  type="text"  formControlName="address">  </div>

<form [formGroup]="checkoutForm" (ngSubmit())="onSubmit(checkoutForm.value)">
<button class="button" type="submit">Purchase</button>
</form>