Angular 使用表單進(jìn)行用戶輸入

使用表單進(jìn)行用戶輸入

本指南基于“入門教程”基本 Angular 應(yīng)用中的第三步“管理數(shù)據(jù)”。

本節(jié)將引導(dǎo)你添加基于表單的結(jié)賬功能，以收集用戶信息作為結(jié)賬信息的一部分。

定義結(jié)帳表單模型

此步驟說明如何在組件類中建立結(jié)帳表單模型。表單模型決定表單的狀態(tài)。

1. 打開 ?cart.component.ts? 。
2. 從 ?@angular/forms? 包導(dǎo)入 ?FormBuilder?。此服務(wù)提供了用來生成控件的便捷方法。

import { Component } from '@angular/core';
import { FormBuilder } from '@angular/forms';

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

3. 在 ?CartComponent ?的 ?constructor()? 中注入 ?FormBuilder ?服務(wù)。該服務(wù)是你已經(jīng)導(dǎo)入過的 ?ReactiveFormsModule ?模塊的一部分。

export class CartComponent {

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

4. 要收集用戶的姓名和地址，請使用 ?FormBuilder ?的 ?group()? 方法來把 ?checkoutForm ?屬性設(shè)置為一個包含 ?name ?和 ?address ?字段的表單模型。

export class CartComponent {

  items = this.cartService.getItems();

  checkoutForm = this.formBuilder.group({
    name: '',
    address: ''
  });

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

5. 定義一個 ?onSubmit()? 方法來處理表單。該方法允許用戶提交其姓名和地址。此外，此方法會使用 ?CartService ?的 ?clearCart()? 方法重置表單并清除購物車。

整個購物車組件類如下：

import { Component } 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 {

  items = this.cartService.getItems();

  checkoutForm = this.formBuilder.group({
    name: '',
    address: ''
  });

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

  onSubmit(): void {
    // Process checkout data here
    this.items = this.cartService.clearCart();
    console.warn('Your order has been submitted', this.checkoutForm.value);
    this.checkoutForm.reset();
  }
}

創(chuàng)建結(jié)帳表單

使用以下步驟在“購物車”視圖的底部添加一個結(jié)帳表單。

1. 在 ?cart.component.html? 的底部，添加一個 HTML ?<form>? 元素和一個 Purchase 按鈕。
2. 使用 ?formGroup ?屬性綁定將 ?checkoutForm ?綁定到 HTML 中的 ?<form>? 標(biāo)簽。

<form [formGroup]="checkoutForm">

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

</form>

3. 在 ?form ?標(biāo)簽上，使用 ?ngSubmit? 事件綁定來偵聽表單提交，并以 ?checkoutForm ?的值為參數(shù)調(diào)用 ?onSubmit()? 方法。

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

4. 添加 ?name ?和 ?address ?的 ?<input>? 字段，每個字段都有一個 ?formControlName ?屬性，該屬性綁定到 ?checkoutForm ?表單控件，以將 ?name ?和 ?address ?綁定到其 ?<input>? 字段。完整的組件如下：

<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()">

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

將少量物品放入購物車后，用戶可以查看他們的物品，輸入他們的姓名和地址，然后提交購買的商品。

要確認(rèn)提交，請打開控制臺以查看包含你所提交的名稱和地址的對象。