FormSupervision Component
FormSupervisionComponent adalah komponen formulir tingkat lanjutan di Skalfa App yang dirancang untuk mengelola form kompleks, termasuk validasi, pengelompokan input, konfirmasi sebelum submit, penanganan error otomatis, dan berbagai jenis input bawaan. Komponen ini kompatibel dengan seluruh input di Skalfa App serta mendukung konstruksi dinamis yang sangat fleksibel.
Contoh Penggunaan
Buat Akun Baru
Gagal
Berhasil
Gagal
Berhasil
Kode berhasil di copy!
Input Cluster (Bulking)
FormSupervision mendukung grouping input seperti alamat, kontak, dll secara berulang.
Gagal
Berhasil
Gagal
Berhasil
Kode berhasil di copy!
Input Custom
Kamu juga bisa melakukan rendering custom dengan tipe custom.
Gagal
Berhasil
Gagal
Berhasil
Kode berhasil di copy!
Properti Bawaan:
forms : FormType[]
Skema formulir
Kode berhasil di copy!
type : "default" | "select" | "number" | "currency" | "date" | "time" | "datetime" | "image" | "radio" |"check" | "enter-password" | "otp" | "map" | "cluster" | "custom"
Jenis input form.
construction : InputProps | ({ formControl, values, setValues, setRegister, errors, setErrors }) => ReactNode
Properti input form, atau gunakan fungsi untuk type custom.
col : 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | string
Ukuran input, gunakan class tailwind untuk responsive.
onHide : (values: any) => boolean
Buat form tidak muncul di kondisi value tertentu.
className : string
class style untuk spesifik input.
submitControl : ApiType
Konfigurasi API submit.
Kode berhasil di copy!
title : string
Judul Formulir.
Kode berhasil di copy!
confirmation : boolean
Untuk memunculkan konfirmasi ketika formulir akan di submit.
Kode berhasil di copy!
defaultValue : Record<string, any>
Mengisi default value input di awal load.
Kode berhasil di copy!
payload : (values: Record<string, any>) => Record<string, any>
Untuk custom payload yang dikirim ke API ketika submit.
Kode berhasil di copy!
onSuccess : (data: any) => void
Untuk custom handler ketika sukses.
Kode berhasil di copy!
onError : (error: any) => void
Untuk custom handler ketika gagal.
Kode berhasil di copy!
footerControl : ({ loading }: { loading: boolean }) => ReactNode
Untuk custom handler ketika gagal.
Kode berhasil di copy!
className : string
class style untuk formulir.