Komponen kustom

Penggunaan

Gunakan form dari useForm. Lihat persiapan awal.

function UppercaseInput({ field }: FieldComponentProps<string>) {
  return (
    <input
      value={field.state.value}
      onChange={(event) => field.handleChange(event.target.value.toUpperCase())}
    />
  );
}

<ErlForm
  form={form}
  schema={schema}
  fieldConfig={{ name: { component: UppercaseInput } }}
/>

Mengganti satu input

Label, deskripsi, dan error tetap dirender di sekitar custom input. Komponen Anda menangani state, aksesibilitas, blur, serta konversi nilai. Samakan id dengan field.name agar label terhubung.

Registry

Prioritas: component per field, registry, lalu input bawaan. Field dengan options mencari key registry select, termasuk saat type radio.

Key registry: string, email, url, select, date, time, datetime, date-object, file, unknown, number, boolean, object, array, dan union.

Container

Object dan array menerima component atau registry object/array. Props bertipe ContainerComponentProps berisi field, config, state, values, dan children opsional. Renderer saat ini tidak mengisi children otomatis; container kustom perlu membangun isi sendiri.

Walaupun tipe registry memiliki key union, discriminated union memiliki jalur render tersendiri yang belum menerapkan override tersebut. Override container record juga belum dipakai renderer 1.0.0.