Wizard
Membagi form menjadi langkah dan memvalidasi perpindahannya.
Penggunaan
Gunakan form dari useForm. Lihat persiapan awal.
const schema = z.object({ name: z.string(), email: z.email() });
<ErlForm
form={form}
schema={schema}
wizard={{
steps: [
{ id: "identity", title: "Identitas", fields: ["name"] },
{ id: "contact", title: "Kontak", fields: ["email"] },
],
validateStep: (step, values) => step === 0
? values.name.length >= 2
: z.email().safeParse(values.email).success,
}}
/>wizard memfilter field root yang terlihat per langkah, sementara seluruh nilai tetap berada pada satu form. Berikut konfigurasi untuk schema dengan name dan email:
Konfigurasikan langkah dan validasi melalui prop wizard. Callback validateStep menahan perpindahan jika nilai belum sesuai.
Opsi
| Opsi | Perilaku |
|---|---|
| steps | Daftar langkah; id unik, title, description opsional, fields |
| previousLabel | Tombol kembali, default Previous |
| nextLabel | Tombol maju, default Next |
| firstStepLabel | Label tombol maju dari langkah pertama |
| lastStepLabel | Ada pada tipe, belum dipakai renderer 1.0.0 |
| validateStep | Boolean/Promise boolean; dipanggil sebelum maju |
| onStepChange | Indeks langkah setelah perpindahan, mulai dari 0 |
fields hanya menerima nama field root, bukan path child. Untuk object, masukkan nama object agar seluruh isinya tampil pada langkah tersebut. Siapkan steps tidak kosong dan stabil selama form digunakan.
Wizard tidak otomatis memvalidasi Zod saat Next, membuat tombol submit, atau menahan Enter pada HTML form. Aplikasi perlu mengatur submit sesuai langkah dan tetap memvalidasi seluruh schema sebelum menyimpan. Perpindahan mundur tidak memanggil validateStep. Tangani error callback async di aplikasi; tombol Next belum memiliki state pending bawaan.