Validasi dan submit

ErlForm membaca schema untuk membuat UI. Validasi dipasang terpisah pada useForm; lihat contoh lengkap.

const form = useForm({
  defaultValues,
  validators: { onChange: schema, onSubmit: schema },
  onSubmit: async ({ value }) => {
    const parsed = schema.safeParse(value);
    if (!parsed.success) return;
    const response = await fetch("/api/profile", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify(parsed.data),
    });
    if (!response.ok) throw new Error("Penyimpanan gagal");
  },
});

Siapkan schema dan defaultValues terlebih dahulu serta buat endpoint aplikasi sendiri. Tangani kegagalan request dengan state pesan agar pengguna bisa mencoba kembali; contoh error server menunjukkan alur lengkap.

Nilai awal dan transform

defaultValues perlu mengikuti bentuk input UI: string, boolean, object, array, File, atau Date. .default() dan .catch() pada schema tidak otomatis diterapkan ke state. Validator tidak menjamin nilai callback submit sudah ditransformasi; panggil schema.parse/safeParse secara eksplisit ketika membutuhkan output transform.

Untuk schema dengan input dan output berbeda, bedakan z.input dan z.output di aplikasi. Pipeline diinferensikan dari sisi input; fieldConfig mengikuti tipe state input. Lihat dukungan schema.

Error dan kondisi

Error field ditampilkan dari pesan pertama pada meta.errors dan dinormalisasi dari string, Error, atau object dengan message. requiredIf mengatur UI, bukan aturan Zod. Field tersembunyi, disabled, dan readonly tetap berada di state dan dapat divalidasi. Terapkan aturan kondisional pada schema.

Number yang dikosongkan menjadi undefined. .optional() tidak membuat string kosong menjadi undefined. Sesuaikan aturan dengan nilai yang dihasilkan input.

Reset dan edit data

Gunakan form.reset() untuk kembali ke defaultValues, atau form.reset(data) setelah data edit diterima. Pastikan data dari API sudah sesuai bentuk UI, terutama Date dan array. Gunakan tombol reset bertipe button agar tidak mengirim form.

Renderer native 1.0.0 belum meneruskan handleBlur secara umum. Pilih validasi onChange/onSubmit, atau custom input untuk alur onBlur/touched. Gunakan form.Subscribe untuk menampilkan isSubmitting/canSubmit dan mencegah pengiriman berulang.

Contoh penggunaan

Gunakan form dari useForm. Lihat persiapan awal.

const schema = z.object({ name: z.string().min(2) });

const form = useForm({
  defaultValues: { name: "" },
  validators: { onChange: schema },
});

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