Cấu hình

Schema structure

Form nhiều bước sử dụng cấu trúc schema lồng nhau:

Cấp	Component	Vai trò
1	FormBlockProvider	Provider cung cấp form context, data source, mode
2	StepsForm	Container quản lý state bước hiện tại
3	StepsForm.Step	Đại diện một bước, chứa title và nội dung
4	StepForm	Form thực tế với grid layout bên trong

StepsForm

Component chính quản lý:

• current: Index bước hiện tại
• steps: Danh sách bước (title, key)
• Navigation: Logic next/previous/submit

StepForm

Form thực tế bên trong mỗi bước:

• Kế thừa từ FormV2 — hỗ trợ đầy đủ field types, validation rules
• Mỗi step có grid layout riêng — sắp xếp field theo hàng/cột
• Validation chạy độc lập — chỉ validate fields của bước hiện tại khi next

Drag & Drop sắp xếp bước

Admin có thể kéo thả để sắp xếp lại thứ tự bước:

1. Di chuột vào tiêu đề bước trên step bar.
2. Xuất hiện DnD handle (icon kéo thả).
3. Kéo bước đến vị trí mong muốn → thả để xác nhận.

Sắp xếp sử dụng @dnd-kit/core DndContext. Step bar cũng hỗ trợ rename và delete bước qua toolbar.

Actions: Next / Previous / Submit

Next action

• Trigger validation trên bước hiện tại (Formily schema validation).
• Nếu tất cả field hợp lệ → chuyển current sang bước kế tiếp.
• Nếu có lỗi → hiển thị thông báo lỗi, giữ nguyên bước.

Previous action

• Quay lại bước trước mà không validate bước hiện tại.
• Data đã điền vẫn được giữ nguyên khi quay lại.

Submit action

• Merge data từ tất cả bước thành một object duy nhất.
• Gọi collection API: resource.create() (mode create) hoặc resource.update() (mode edit).
• Hỗ trợ callback sau submit: đóng popup, refresh block, redirect.

Chế độ Create / Edit / Add New

Mode	Data source	Submit action
Create	Form trống	collection:create
Edit	Load record có sẵn vào form	collection:update
Add New	Form với preset values (từ filter/params)	collection:create

Chế độ được chọn khi tạo block và có thể thay đổi qua designer settings.

Step title toolbar

Trên mỗi tiêu đề bước, toolbar cung cấp:

• Rename: Đổi tên bước
• Delete: Xóa bước (dữ liệu field trong bước bị xóa theo)
• DnD handle: Kéo thả sắp xếp vị trí
• Add step: Thêm bước mới sau bước hiện tại

Custom actions

Ngoài next/previous/submit mặc định, admin có thể thêm action tùy chỉnh trên từng bước qua Action Initializers. VD: nút "Save Draft" lưu tạm dữ liệu, nút "Skip" bỏ qua bước không bắt buộc.