API publik

[
  {
    "name": "name",
    "type": "string"
  },
  {
    "name": "active",
    "type": "boolean"
  },
  {
    "name": "email",
    "type": "email"
  }
]

ErlForm

import { ErlForm } from "erlangform";
<ErlForm<Values>
  form={form}
  schema={schema}
  fieldConfig={fieldConfig}
  sectionConfig={sectionConfig}
  fieldComponent={registry}
  wizard={wizard}
  serverErrors={serverErrors}
  onValuesChange={handleValuesChange}
/>

Contoh di atas memperlihatkan seluruh prop; hanya form dan schema yang wajib. Siapkan variabel sesuai panduan masing-masing.

Tidak ada prop children, onSubmit, defaultValues, className, atau theme pada ErlForm 1.0.0. Submit dan nilai awal dikelola oleh useForm; pembungkus HTML disediakan aplikasi. Nama implementasi internal AutoForm tidak diekspor sebagai komponen publik.

Untuk serverErrors, baca catatan kompatibilitas TanStack. Demo juga mengisi errorMap.onServer karena prop tersebut saja belum memperbarui error turunan pada versi TanStack yang terpasang.

Field

Komponen tingkat rendah untuk satu field. Props: form, name, type, state wajib; config, fieldComponent, dan values opsional. type adalah jenis metadata seperti string/number/boolean, bukan varian password/textarea; varian tersebut berada pada config.type.

import { Field } from "erlangform";
<Field
  form={form}
  name="name"
  type="string"
  state={{ visible: true, disabled: false, readOnly: false, required: false }}
  config={{ label: "Nama" }}
/>

Field merender input dan label/error, tetapi tidak memproses showIf, clearOnHide, layout, atau recursive container seperti FieldRenderer. Berikan state efektif sendiri.

FieldRenderer dan infer

import { infer, FieldRenderer } from "erlangform";
const fields = infer(schema);

// Di dalam komponen React:
<form.Subscribe selector={(state) => state.values}>
  {(values) => fields.map((field) => (
    <FieldRenderer key={field.name} form={form} field={field} values={values} />
  ))}
</form.Subscribe>

FieldRenderer menerima form, field metadata, values, serta fieldConfig, fieldComponent, parentPath, dan legacyFieldConfig opsional. Ini API tingkat rendah; subscription nilai tetap menjadi tanggung jawab aplikasi saat tidak memakai ErlForm.

infer menerima z.ZodObject dan menghasilkan FieldMeta[]. Metadata memiliki name dan type, dengan fields untuk object, item untuk array/record, items untuk tuple, variants/discriminator/variantKeys untuk union, dan options untuk pilihan string. Metadata tidak berisi seluruh validator, min/max schema, atau nilai default.

Seluruh impor publik berasal dari erlangform. FieldArray, FieldControl, FieldSection, helper internal, AutoFormProps, dan SelectOption tidak diekspor dari entry point. Gunakan tipe publik dan hindari impor path src/dist internal.

Contoh penggunaan

Gunakan form dari useForm. Lihat persiapan awal.

const schema = z.object({
  name: z.string(),
  active: z.boolean(),
});

const fields = infer(schema);