Hướng dẫn quản lý trạng thái biểu mẫu dự đoán được trong ngx-admin

ngx-admin là một mẫu quản trị backend dựa trên Angular 8+ và Nebular. Nó sử dụng Bootstrap 4 và Angular Material làm UI framework, chứa nhiều thành phần UI và biểu đồ được xây dựng sẵn, giúp các nhà phát triển nhanh chóng xây dựng các hệ thống quản trị doanh nghiệp. Địa chỉ dự án: https://github.com/akveo/ngx-admin

Trong các ứng dụng doanh nghiệp phức tạp, việc quản lý trạng thái biểu mẫu là yếu tố then chốt để đảm bảo trải nghiệm người dùng và tính nhất quán dữ liệu. Bài viết này sẽ giới thiệu cách thực hiện quản lý trạng thái biểu mẫu có thể dự đoán được trong ngx-admin, giúp các nhà phát triển xây dựng hệ thống biểu mẫu mạnh mẽ hơn.

Tại sao cần quản lý trạng thái biểu mẫu?

Trong các hệ thống quản trị backend phức tạp, biểu mẫu thường chứa nhiều trường, quy tắc xác thực và logic tương tác. Nếu không có quản lý trạng thái tốt, có thể dẫn đến các vấn đề sau:

• Trạng thái biểu mẫu hỗn loạn, khó theo dõi đầu vào của người dùng
• Logic xác phân tán, khó bảo trì
• Cập nhật trạng thái không thể dự đoán được, dẫn đến UI hiển thị không nhất quán với dữ liệu thực tế
• Khó thực hiện các chức năng nâng cao như hoàn tác, khôi phục biểu mẫu

ngx-admin cung cấp giải pháp quản lý trạng thái biểu mẫu dựa trên Angular Reactive Forms, kết hợp với mô hình state machine có thể giải quyết hiệu quả các vấn đề này.

Nền tảng biểu mẫu trong ngx-admin

Các thành phần biểu mẫu trong ngx-admin chủ yếu nằm trong thư mục src/app/pages/forms/, bao gồm đầu vào biểu mẫu, nút, bố cục và chọn ngày. Ví dụ:

• Thành phần đầu vào biểu mẫu: src/app/pages/forms/form-inputs/form-inputs.component.ts
• Thành phần nút: src/app/pages/forms/buttons/buttons.component.ts
• Thành phần bố cục biểu mẫu: src/app/pages/forms/form-layouts/form-layouts.component.ts
• Thành phần chọn ngày: src/app/pages/forms/datepicker/datepicker.component.ts

Các thành phần này cung cấp nền tảng để xây dựng biểu mẫu phức tạp, nhưng để thực hiện quản lý trạng thái có thể dự đoán được, cần kết hợp với Reactive Forms và mô hình quản lý trạng thái của Angular.

Áp dụng mô hình state machine trong quản lý biểu mẫu

Mô hình state machine là một mẫu thiết kế hành vi, nó đóng gói hành vi của đối tượng vào các trạng thái khác nhau, quản lý hành vi của đối tượng bằng cách định nghĩa các quy tắc chuyển đổi giữa các trạng thái. Trong quản lý biểu mẫu, state machine có thể giúp chúng ta:

1. Xác định rõ ràng các trạng thái của biểu mẫu (như ban đầu, chỉnh sửa, đang gửi, gửi thành công, gửi thất bại, v.v.)
2. Định nghĩa các quy tắc chuyển đổi giữa các trạng thái, đảm bảo sự thay đổi trạng thái có thể dự đoán được
3. Tập trung quản lý logic liên quan đến trạng thái, nâng cao khả năng bảo trì mã

StateService trong ngx-admin (src/app/@core/utils/state.service.ts) cung cấp cơ sở thực hiện quản lý trạng thái, chúng ta có thể tham khảo ý tưởng này để xây dựng state machine cho biểu mẫu.

Các bước thực hiện quản lý trạng thái biểu mẫu có thể dự đoán được

1. Định nghĩa trạng thái biểu mẫu

Đầu tiên, chúng ta cần định nghĩa các trạng thái có thể có của biểu mẫu. Một trạng thái biểu mẫu điển hình bao gồm:

• INITIAL: Trạng thái ban đầu, biểu mẫu chưa được sửa đổi
• EDITING: Trạng thái chỉnh sửa, người dùng đang nhập dữ liệu
• VALIDATING: Trạng thái xác thực, đang tiến hành xác thực biểu mẫu
• SUBMITTING: Trạng thái gửi, biểu mẫu đang được gửi đến máy chủ
• SUBMITTED: Trạng thái gửi thành công
• ERROR: Trạng thái lỗi, gửi thất bại hoặc xác thực thất bại

2. Tạo dịch vụ trạng thái

Chúng ta có thể tạo một dịch vụ trạng thái biểu mẫu, kế thừa từ StateService của ngx-admin, để quản lý trạng thái biểu mẫu:

import { Injectable } from '@angular/core';
import { StateService } from '../@core/utils/state.service';

@Injectable()
export class FormStatusService extends StateService {
  // Định nghĩa trạng thái biểu mẫu
  formStatuses = {
    INITIAL: 'initial',
    EDITING: 'editing',
    VALIDATING: 'validating',
    SUBMITTING: 'submitting',
    SUBMITTED: 'submitted',
    ERROR: 'error'
  };

  // Khởi tạo trạng thái biểu mẫu
  constructor() {
    super();
    this.setLayoutState(this.formStatuses.INITIAL);
  }

  // Phương thức chuyển đổi trạng thái
  setFormStatus(status: string) {
    this.setLayoutState(status);
  }

  getFormStatus() {
    return this.onLayoutState();
  }
}

3. Sử dụng dịch vụ trạng thái trong thành phần

Trong thành phần biểu mẫu, chúng ta có thể tiêm FormStatusService, và cập nhật trạng thái dựa trên thao tác của người dùng và sự kiện biểu mẫu:

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { FormStatusService } from './form-status.service';

@Component({
  selector: 'app-data-form',
  templateUrl: './data-form.component.html',
  styleUrls: ['./data-form.component.scss']
})
export class DataFormComponent implements OnInit {
  userForm: FormGroup;
  formStatus$ = this.formStatusService.getFormStatus();

  constructor(
    private formBuilder: FormBuilder,
    private formStatusService: FormStatusService
  ) {
    this.userForm = this.formBuilder.group({
      fullName: ['', Validators.required],
      emailAddress: ['', [Validators.required, Validators.email]]
    });
  }

  ngOnInit() {
    // Theo dõi thay đổi giá trị biểu mẫu, cập nhật thành trạng thái chỉnh sửa
    this.userForm.valueChanges.subscribe(() => {
      this.formStatusService.setFormStatus(this.formStatusService.formStatuses.EDITING);
    });
  }

  handleSubmit() {
    if (this.userForm.invalid) {
      this.formStatusService.setFormStatus(this.formStatusService.formStatuses.ERROR);
      return;
    }

    this.formStatusService.setFormStatus(this.formStatusService.formStatuses.SUBMITTING);
    
    // Mô phỏng gửi biểu mẫu
    setTimeout(() => {
      this.formStatusService.setFormStatus(this.formStatusService.formStatuses.SUBMITTED);
    }, 1000);
  }
}

4. Hiển thị UI dựa trên trạng thái trong mẫu

Trong mẫu, chúng ta có thể hiển thị các yếu tố UI khác nhau dựa trên trạng thái biểu mẫu, chẳng hạn như trạng thái nút gửi, thông báo lỗi, v.v.:

<form [formGroup]="userForm" (ngSubmit)="handleSubmit()">
  <div class="form-group">
    <label>Họ và tên</label>
    <input type="text" formControlName="fullName" class="form-control">
  </div>

  <div class="form-group">
    <label>Email</label>
    <input type="email" formControlName="emailAddress" class="form-control">
  </div>

  <button type="submit" class="btn btn-primary" 
          [disabled]="formStatus$ | async === formStatusService.formStatuses.SUBMITTING">
    <span *ngIf="formStatus$ | async === formStatusService.formStatuses.SUBMITTING">Đang gửi...</span>
    <span *ngIf="formStatus$ | async !== formStatusService.formStatuses.SUBMITTING">Gửi</span>
  </button>

  <div *ngIf="formStatus$ | async === formStatusService.formStatuses.ERROR" class="alert alert-danger">
    Vui lòng kiểm tra đầu vào của bạn và thử lại.
  </div>

  <div *ngIf="formStatus$ | async === formStatusService.formStatuses.SUBMITTED" class="alert alert-success">
    Biểu mẫu đã được gửi thành công!
  </div>
</form>

Kết luận

Bằng cách kết hợp các thành phần hiện có của ngx-admin và mô hình state machine, chúng ta có thể thực hiện quản lý trạng thái biểu mẫu có thể dự đoán được. Phương pháp này không chỉ nâng cao khả năng bảo trì và độ tin cậy của biểu mẫu, mà còn cung cấp phản hồi tương tác rõ ràng hơn cho người dùng. Trong thực tế phát triển, chúng ta có thể mở rộng định nghĩa trạng thái và quy tắc chuyển đổi dựa trên yêu cầu cụ thể, xây dựng hệ thống biểu mẫu phức tạp hơn.