Mulai menggunakan Erlangform
Instalasi dan form lengkap Erlangform 1.0.0.
Dokumentasi ini mengikuti Erlangform 1.0.0. Nama package adalah erlangform; komponen utamanya bernama ErlForm.
Instalasi
npm install erlangform@1.0.0 zod@^4 @tanstack/react-form@^1Basis implementasi menggunakan React 19, Zod 4, dan TanStack Form 1. Stylesheet dimuat otomatis tanpa import CSS terpisah. Pengembangan library dari source menggunakan Node.js 22 dan pnpm 10.19.0.
Demo
Contoh lengkap
"use client";
import { useForm } from "@tanstack/react-form";
import { ErlForm, type FieldConfig } from "erlangform";
import { z } from "zod";
const schema = z.object({
name: z.string().min(2, "Nama minimal 2 karakter"),
email: z.email("Email tidak valid"),
});
type Values = z.infer<typeof schema>;
const fieldConfig = {
name: { label: "Nama", placeholder: "Nama lengkap" },
email: { label: "Email" },
} satisfies FieldConfig<Values>;
export default function ProfileForm() {
const form = useForm({
defaultValues: { name: "", email: "" } satisfies Values,
validators: { onChange: schema },
onSubmit: async ({ value }) => { console.log(value); },
});
return (
<form onSubmit={(event) => {
event.preventDefault();
void form.handleSubmit();
}}>
<ErlForm<Values> form={form} schema={schema} fieldConfig={fieldConfig} />
<form.Subscribe selector={(state) => [state.canSubmit, state.isSubmitting]}>
{([canSubmit, isSubmitting]) => (
<button type="submit" disabled={!canSubmit || isSubmitting}>
{isSubmitting ? "Menyimpan…" : "Simpan"}
</button>
)}
</form.Subscribe>
<button type="button" onClick={() => form.reset()}>Reset</button>
</form>
);
}useForm dipanggil di dalam komponen React. ErlForm merender field, bukan elemen HTML form dan tombol submit; aplikasi menyediakan keduanya.
schemamenentukan struktur dan aturan Zod; root harus z.object().defaultValuesmenginisialisasi state, termasuk object dan array bersarang.fieldConfigmengatur tampilan dan perilaku secara opsional.
Memberikan schema ke ErlForm belum memasang validator; hubungkan juga ke validators. Nilai .default() pada schema tidak otomatis mengisi state form.
Lanjutkan ke dukungan schema, konfigurasi field, dan validasi serta submit.