Membangun Form Berbasis Skema (Data-Driven Forms)

Form berbasis skema (data-driven form) adalah pendekatan di mana struktur form — field apa saja, tipe input, dan aturan validasinya — didefinisikan dalam data (biasanya JSON), bukan ditulis manual sebagai JSX untuk setiap field.

Masalah yang Diselesaikan

Form dengan banyak field yang sering berubah, atau form yang strukturnya berbeda-beda tergantung konteks (misalnya form pendaftaran berbeda per jenis akun), akan sangat merepotkan jika setiap variasi ditulis sebagai komponen JSX terpisah. Pendekatan berbasis skema memungkinkan struktur form disimpan sebagai data, bahkan bisa diatur dari luar kode aplikasi seperti dari database atau CMS.

Mendefinisikan Skema

const skemaForm = [
  { nama: "namaLengkap", label: "Nama Lengkap", tipe: "text", wajib: true },
  { nama: "email", label: "Email", tipe: "email", wajib: true },
  {
    nama: "peran",
    label: "Peran",
    tipe: "select",
    opsi: ["Admin", "Editor", "Pembaca"],
  },
];

Merender Field Secara Dinamis

function FieldForm({ field, nilai, onChange }) {
  if (field.tipe === "select") {
    return (
      <select value={nilai} onChange={(e) => onChange(field.nama, e.target.value)}>
        {field.opsi.map((opsi) => (
          <option key={opsi} value={opsi}>{opsi}</option>
        ))}
      </select>
    );
  }

  return (
    <input
      type={field.tipe}
      value={nilai}
      required={field.wajib}
      onChange={(e) => onChange(field.nama, e.target.value)}
    />
  );
}

function FormDinamis({ skema, onSubmit }) {
  const [data, setData] = useState({});

  const ubahField = (nama, nilai) => {
    setData((prev) => ({ ...prev, [nama]: nilai }));
  };

  return (
    <form onSubmit={(e) => { e.preventDefault(); onSubmit(data); }}>
      {skema.map((field) => (
        <div key={field.nama}>
          <label>{field.label}</label>
          <FieldForm
            field={field}
            nilai={data[field.nama] || ""}
            onChange={ubahField}
          />
        </div>
      ))}
      <button type="submit">Simpan</button>
    </form>
  );
}

Validasi Berbasis Skema

function validasi(skema, data) {
  const errors = {};

  for (const field of skema) {
    if (field.wajib && !data[field.nama]) {
      errors[field.nama] = `${field.label} wajib diisi`;
    }
  }

  return errors;
}

Menambah Field Baru Tanpa Mengubah Komponen

Keunggulan utama pendekatan ini terlihat saat ada kebutuhan field baru — cukup menambahkan satu objek ke array skema, tanpa menyentuh komponen FormDinamis atau FieldForm sama sekali.

skemaForm.push({
  nama: "nomorTelepon",
  label: "Nomor Telepon",
  tipe: "tel",
  wajib: false,
});

Kapan Pendekatan Ini Cocok Dipakai

Form berbasis skema sangat berguna untuk aplikasi admin dengan banyak form serupa, form yang perlu dikonfigurasi non-developer, atau sistem yang formnya berubah-ubah tergantung data dari server. Untuk form sederhana dengan sedikit field yang jarang berubah, menulis JSX secara langsung biasanya tetap lebih mudah dibaca dan dipelihara.

Kesimpulan

Dengan memisahkan struktur form dari implementasi komponennya, form berbasis skema memungkinkan perubahan field dilakukan lewat data, bukan lewat kode. Pendekatan ini sangat berharga untuk aplikasi berskala besar dengan banyak form yang serupa polanya namun berbeda kebutuhannya di tiap konteks.

Membangun Form Berbasis Skema (Data-Driven Forms).