Apa itu ErlangForm?

ErlangForm adalah component form untuk React yang membaca schema lalu membuat field secara otomatis. Anda cukup mendefinisikan struktur data satu kali, kemudian ErlangForm menggunakannya untuk membangun input dan menampilkan validasi.

Kenapa dibuat?

ErlForm awalnya dibuat sebagai library pribadi untuk mengurangi pekerjaan berulang saat membangun formulir React. Setelah pola schema, validasi, konfigurasi field, dan data bertingkat mulai sering dipakai di beberapa proyek, library ini dirapikan agar bisa digunakan ulang dengan API yang tetap sederhana dan fleksibel.

Masalah yang diselesaikan

Pada form React biasa, developer perlu menulis berulang-ulang:

markup setiap input;
label, placeholder, dan deskripsi;
koneksi input ke state form;
pesan error validasi;
aturan tipe data.

ErlangForm mengurangi pekerjaan tersebut dengan menjadikan schema sebagai sumber struktur form.

Cara kerja

Schema
  ↓
ErlangForm membaca field
  ↓
Input dibuat otomatis
  ↓
TanStack Form mengelola state
  ↓
Zod memvalidasi value

Peran setiap package

Package	Peran
`erlangform`	Membuat field dan layout form secara otomatis
`zod`	Mendefinisikan struktur serta aturan validasi
`@tanstack/react-form`	Mengelola state, perubahan value, dan submit

Contoh paling sederhana

const schema = z.object({
  username: z.string().min(3),
});

type FormValues = z.infer<typeof schema>;

<ErlForm<FormValues> form={form} schema={schema} />;

Field username akan dikenali dari schema dan dirender sebagai text input. Untuk mengatur label atau placeholder, gunakan fieldConfig.

Roadmap schema

Saat ini Zod adalah schema engine utama ErlangForm. Namun konsep ErlangForm tidak harus terbatas pada Zod. Dukungan untuk schema engine lain dapat ditambahkan melalui adapter lain seperti yup, , dengan target agar component React dan pola konfigurasi tetap familiar.

Mulai belajar

Lanjutkan ke bagian Basic melalui halaman Text dan Number, termasuk pemakaian fieldConfig. Untuk struktur data bersarang, lihat Object Field dan Arrays.

Introduction