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

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

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 nameaddress, mỗi trường có một thuộc tính formControlName liên kết với các trường nameaddress 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ọ.

Màn hình thanh toán

Để xác nhận việc gửi biểu mẫu, hãy mở console của trình duyệt để xem một đối tượng chứa tên và địa chỉ bạn đã gửi.

Tiếp theo là gì

Bạn đã có một ứng dụng cửa hàng trực tuyến hoàn chỉnh với danh mục sản phẩm, giỏ hàng và chức năng thanh toán.

Tiếp tục đến hướng dẫn "Triển khai ứng dụng Angular" để triển khai ứng dụng của bạn lên Firebase hoặc máy chủ của riêng bạn.

AngularTypeScript
Bài Viết Liên Quan:
Trình khởi động bootstrap trong Angular
Trung Nguyen 26/07/2021
Trình khởi động bootstrap trong Angular

Trong hướng dẫn này, chúng ta sẽ tìm hiểu về trình khởi động bootstrap và cách Angular hoạt động bên trong và khởi động ứng dụng của chúng ta.

Cách tạo một dự án mới trong Angular
Trung Nguyen 25/07/2021
Cách tạo một dự án mới trong Angular

Trong hướng dẫn này, chúng tôi sẽ chỉ cho bạn cách sử dụng Angular CLI để tạo một dự án mới trong Angular.

Không gian làm việc và Cấu trúc file dự án
Trung Nguyen 22/07/2021
Không gian làm việc và Cấu trúc file dự án

Trong hướng dẫn này, bạn sẽ tìm hiểu về không dan làm việc và cấu trúc file dự án ứng dụng, dự án thư viện của Angular.

Service và Dependency Injection trong Angular
Trung Nguyen 21/07/2021
Service và Dependency Injection trong Angular

Trong bài viết này, bạn sẽ tìm hiểu vì sao Angular lại tách riêng component và service, cách sử dụng dependency injection để khởi tạo instance của service.