Sử dụng biểu mẫu để người dùng nhập liệu trong ứng dụng Angular

Trung Nguyen
14/07/2021
4 min read

Nội dung chính của bài viết

Hướng dẫn này được xây dựng dựa trên bước Quản lý Dữ liệu của hướng dẫn Bắt đầu với ứng dụng Angular cơ bản.

Phần này hướng dẫn bạn cách tạo biểu mẫu để người dùng nhập thông tin thanh toán.

Tạo mô hình biểu mẫu thanh toán

Bước này chỉ cho bạn cách thiết lập mô hình biểu mẫu thanh toán trong lớp component. Mô hình biểu mẫu xác định trạng thái của biểu mẫu.

1. Mở tệp cart.component.ts.

2. Import dịch vụ FormBuilder từ gói @angular/forms. Dịch vụ này cung cấp các phương thức thuận tiện để tạo các control.

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

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

src/app/cart/cart.component.ts

3. Inject dịch vụ FormBuilder trong CartComponentconstructor(). Dịch vụ này là một phần của mô-đun ReactiveFormsModule mà bạn đã import.

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

src/app/cart/cart.component.ts

4. Để nhận thông tin tên và địa chỉ của người dùng, hãy sử dụng phương thức group() của FormBuilder để thiết lập giá trị cho thuộc tính checkoutForm là form model chứa các trường name và address.

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

src/app/cart/cart.component.ts

5. Định nghĩa phương thức onSubmit() để xử lý biểu mẫu. Phương thức này cho phép người dùng gửi tên và địa chỉ của họ. Ngoài ra, phương thức này cũng sử dụng phương thức clearCart() của CartService để thiết lập lại biểu mẫu và xóa giỏ hàng.

Toàn bộ lớp component giỏ hàng như sau:

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();
  }
}

src/app/cart/cart.component.ts

Tạo biểu mẫu thanh toán

Sử dụng các bước sau để thêm biểu mẫu thanh toán ở cuối màn hình Giỏ hàng.

1. Ở cuối file template cart.component.html, hãy thêm phần tử HTML <form> và nút Purchase.

2. Sử dụng liên kết thuộc tính formGroup để liên kết thuộc tính checkoutForm với thẻ <form>.

<form [formGroup]="checkoutForm">

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

</form>

3. Trên thẻ form, sử dụng liên kết sự kiện ngSubmit để lắng nghe gửi biểu mẫu và gọi phương thức onSubmit() với giá trị checkoutForm.

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

src/app/cart/cart.component.html

4. Thêm thẻ <input> cho các trường name và address, mỗi trường có một thuộc tính formControlName liên kết với các trường name và address của checkoutForm. Template hoàn chỉnh của component như sau:

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

src/app/cart/cart.component.html

Sau khi thêm một vài mặt hàng vào giỏ hàng, người dùng có thể xem lại các mặt hàng của họ, nhập tên và địa chỉ của họ và gửi đơn mua hàng của họ.