FormBuilder / FormRenderer
Biarkan pemakai aplikasimu mendesain form sendiri: field, aturan tampil, aturan wajib isi. Hasilnya JSON biasa, dan FormRenderer menampilkannya.
Demo
Coba: ganti Jenis pesanan jadi Ambil sendiri, lalu lihat Alamat.
Tekan Enter untuk memilih kolom dan membuka pengaturannya. Tekan Spasi untuk mengangkat kolom, tombol panah untuk memindahkannya, lalu Spasi lagi untuk meletakkannya. Escape mengembalikannya. Delete menghapusnya.Untuk memindahkan bagian, tekan Spasi, gunakan tombol panah, lalu tekan Spasi untuk meletakkan atau Escape untuk membatalkan.
Jenis pesanan
Bersyarat
Contoh form. Field yang disembunyikan tidak dicek dan tidak dikirim. Desain hanya bisa diubah di layar selebar 1024px atau lebih; di bawah itu kit menampilkan pratinjau saja.
Yang sudah dikerjakan kit
- Aturan tampil. Grup ALL / ANY dengan satu tingkat sub-grup, cukup untuk "(A dan B) atau C". Operator menyesuaikan tipe field.
- Kalimat, bukan kode. Setiap aturan dibacakan sebagai satu kalimat dalam bahasa pemakai.
- Tidak bisa melingkar. Field yang akan bergantung pada dirinya sendiri tidak ditawarkan, dan skema yang melingkar ditolak.
- Skema lama tetap jalan. Versi 1 dan 2 dimigrasi otomatis. validateFormSchema mengembalikan Result, tidak pernah melempar error.
- Banyak tipe field. Teks, angka, pilihan, tanggal, file, telepon, kode OTP, tag, slider, fieldset, dan section.
// Halaman admin: desain form
export function DesignPage() {
return <FormBuilder schema={schema} onSchemaChange={saveSchema} />;
}
// Halaman pemakai: isi form
export function FillPage() {
const checked = validateFormSchema(stored);
if (!isOk(checked)) return <ErrorState error={checked.error} />;
return (
<FormRenderer
schema={checked.data}
onSubmit={(values) => sendAnswers(values)}
/>
);
}Error dari server di onSubmit langsung muncul di field-nya.