Basic Array

Array memakai z.array(z.object(...)) untuk membuat daftar item yang bisa ditambah dan dihapus. Contoh ini dimulai dengan satu kontak.

Penggunaan

Gunakan form dari useForm. Lihat persiapan awal.

example.tsx

const schema = z.object({ contacts: z.array(z.object({ phone: z.string() })) });

<ErlForm
  form={form}
  schema={schema}
  fieldConfig={{
    contacts: {
      array: { addLabel: "Tambah kontak", maxItems: 5, reorderable: true },
      item: { phone: { label: "Telepon" } },
    },
  }}
/>

fieldConfig.contacts.array mengatur label item dan tombol tambah/hapus. Untuk array di dalam array, lanjutkan ke Nested Array.

Seluruh opsi array 1.0.0

Opsi di dalam array	Default / perilaku
itemLabel	Item #1 dan seterusnya; ReactNode atau callback item/index
addLabel / removeLabel	Add / Remove
duplicateLabel	Duplicate; menyisipkan salinan setelah item
moveUpLabel / moveDownLabel	Move up / Move down
emptyLabel	No items yet.
minItems	0; mencegah penghapusan di bawah batas
maxItems	Tanpa batas; mencegah penambahan/duplikasi di atas batas
reorderable	false; true mengaktifkan drag and drop

Tombol naik/turun tetap tersedia tanpa reorderable; opsi itu hanya mengatur drag and drop. Tombol Add dapat tetap terlihat aktif saat mencapai maxItems, tetapi handler menolak penambahan. minItems tidak otomatis menambah item awal. Tambahkan .min()/.max() pada schema untuk validasi jumlah data, termasuk data yang berasal dari API.

Item baru menggunakan nilai kosong berdasarkan metadata, bukan schema.default(): string kosong (atau pilihan enum pertama), boolean false, number/Date/file undefined, array kosong, dan object dengan child kosong. Duplikasi menggunakan nilai item yang sama tanpa deep clone; hindari memutasi object di luar API form.

Array primitif dan matriks

const schema = z.object({
  tags: z.array(z.string()),
  matrix: z.array(z.array(z.string())),
});
const fieldConfig = {
  tags: { item: { label: "Tag", placeholder: "Isi tag" } },
  matrix: {
    array: { addLabel: "Tambah baris" },
    item: {
      array: { addLabel: "Tambah sel" },
      item: { placeholder: "Isi sel" },
    },
  },
} satisfies FieldConfig<z.infer<typeof schema>>;

Impor FieldConfig dari erlangform. Nilai awal dapat berupa { tags: [], matrix: [] } dengan tipe dari schema. item dipakai rekursif untuk array di dalam array, serta tuple/union/record sebagai elemen. Jika item diisi pada array object, konfigurasinya menggantikan child langsung pada parent. Lihat scope callback.

Contoh penggunaan