Error server dan perubahan nilai

Klik Simulasikan error server untuk menampilkan error email, lalu Hapus error untuk membersihkannya. Nilai terbaru ditampilkan melalui onValuesChange. Demo ini tidak mengirim request jaringan.

serverErrors berupa object dengan nama/path field sebagai key dan string atau array string sebagai pesan. Untuk child gunakan profile.email atau contacts[0].phone. Error global ditampilkan melalui state aplikasi sendiri.

Kompatibilitas versi 1.0.0

Versi TanStack Form yang dipakai website ini menghitung meta.errors dari errorMap. Erlangform 1.0.0 menulis serverErrors langsung ke meta.errors, sehingga prop itu saja belum tentu menampilkan pesan. Demo juga memasukkan pesan ke errorMap.onServer melalui form.setFieldMeta. Ini kode kompatibilitas pada aplikasi, bukan perilaku otomatis ErlForm.

Contoh penggunaan

Gunakan form dari useForm. Lihat persiapan awal.

const message = "Email ini sudah terdaftar.";

form.setFieldMeta("email", (meta) => ({
  ...meta,
  errorMap: { ...meta.errorMap, onServer: message },
}));

<ErlForm
  form={form}
  schema={schema}
  serverErrors={{ email: message }}
/>

Memetakan respons API

Di callback onSubmit, kirim data ke endpoint milik aplikasi. Contoh kontrak untuk respons 422 adalah object errors dengan key email. Validasi bentuk respons sebelum memakainya.

const response = await fetch("/api/email", {
  method: "POST",
  headers: { "Content-Type": "application/json" },
  body: JSON.stringify(value),
});
if (response.status === 422) {
  const result = await response.json() as { errors: ServerErrors };
  setErrors(result.errors);
  const emailError = result.errors.email;
  form.setFieldMeta("email", (meta) => ({
    ...meta,
    errorMap: { ...meta.errorMap, onServer: Array.isArray(emailError) ? emailError[0] : emailError },
  }));
  return;
}
if (!response.ok) throw new Error("Permintaan gagal");

Siapkan form, value, dan setErrors di komponen seperti kode demo; impor ServerErrors dari erlangform. Tangani kegagalan request melalui try/catch dan pesan yang memungkinkan pengguna mencoba kembali. Gunakan isSubmitting untuk mencegah pengiriman berulang.

Menghapus error lama

Renderer hanya memperbarui key yang diberikan. Mengubah serverErrors menjadi object kosong atau undefined tidak membersihkan key secara eksplisit. Kirim array kosong untuk setiap key, misalnya { email: [] }, dan kosongkan errorMap.onServer menjadi undefined bila memakai pemetaan kompatibilitas di atas. Validasi berikutnya juga dapat menimpa metadata; serverErrors bukan penyimpanan error terpisah.

Mengamati perubahan

onValuesChange menerima seluruh nilai melalui effect, termasuk saat mount dan untuk field tersembunyi. Gunakan callback stabil, misalnya useCallback. Argumennya berupa nilai, bukan event DOM.

Untuk autosave, kelola debounce, status request, dan cleanup di aplikasi. Hindari menulis kembali nilai form tanpa pemeriksaan pada callback yang sama karena dapat membuat siklus pembaruan.