'use client'; import { canGoPrev, createWizardState, FieldDescription, FormStep, goNext, goPrev, isStepCompleted, validators, validateStep, } from '@dynamic-field-kit/core'; import { MultiFieldInput } from '@dynamic-field-kit/react'; import { useState } from 'react'; import '../../lib/fieldRegistry'; const accountFields: FieldDescription[] = [ { name: 'email', type: 'email', label: 'Email', placeholder: 'example@domain.com', validate: validators.compose( validators.required('Email bắt buộc'), validators.email('Định dạng email không hợp lệ') ), }, { name: 'password', type: 'password', label: 'Mật khẩu', validate: validators.compose( validators.required('Mật khẩu bắt buộc'), validators.minLength(8, 'Tối thiểu 8 ký tự') ), }, ]; const profileFields: FieldDescription[] = [ { name: 'fullName', type: 'text', label: 'Họ và tên', validate: validators.required('Họ tên bắt buộc'), }, { name: 'birthDate', type: 'date', label: 'Ngày sinh', }, ]; const preferenceFields: FieldDescription[] = [ { name: 'plan', type: 'radio', label: 'Gói dịch vụ', options: [ { label: 'Miễn phí', value: 'free' }, { label: 'Pro', value: 'pro' }, ], validate: validators.required('Vui lòng chọn gói'), }, { name: 'newsletter', type: 'switch', label: 'Nhận bản tin ưu đãi', }, ]; const steps: FormStep[] = [ { id: 'account', title: 'Tài khoản', fields: accountFields }, { id: 'profile', title: 'Hồ sơ', fields: profileFields }, { id: 'preferences', title: 'Tuỳ chọn', fields: preferenceFields }, ]; export default function WizardDemo() { const [wizard, setWizard] = useState(() => createWizardState(steps)); const [data, setData] = useState>({}); const [errors, setErrors] = useState>({}); const [submitted, setSubmitted] = useState(false); // goNext deliberately does not validate - the wizard decides whether a step // may be left, so a "save draft and come back" flow is possible too. function handleNext() { const result = validateStep(wizard.currentStep, data); setErrors(result.errors); if (result.valid) { setWizard(goNext(wizard)); } } function handleFinish() { const result = validateStep(wizard.currentStep, data); setErrors(result.errors); if (result.valid) { setSubmitted(true); } } return ( <> {/* Step indicator, driven by isStepCompleted */}

{done ? '✓ ' : `${index + 1}. `} {step.title}

{submitted ? (

🎉 Hoàn tất!

            {JSON.stringify(data, null, 2)}

) : ( <>

Bước {wizard.currentStepIndex + 1}/{wizard.totalSteps}:{' '} {wizard.currentStep.title}

{/* Only the current step's fields are rendered */} {Object.keys(errors).length > 0 && (

{field}: {messages.join(', ')}

)}

{wizard.isLastStep ? ( ) : ( )}

)} ); }

Multi-Step Form Wizard

Bước 1/3: Tài khoản