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.
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';
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,
) {}
}
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,
) {}
}
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();
}
}
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>
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>
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ọ.
Để 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.
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.
Bạn có thể vui lòng tắt trình chặn quảng cáo ❤️ để hỗ trợ chúng tôi duy trì hoạt động của trang web.
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.
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.
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.
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.