Text

"use client";

import { useForm } from "@tanstack/react-form";
import { ErlForm } from "erlangform";
import { schema, type FormValues } from "./schema";

export default function UsernameForm() {
  const form = useForm({
    defaultValues: { username: "" },
    validators: { onChange: schema },
    onSubmit: ({ value }) => console.log(value),
  });

  return (
    <form onSubmit={(event) => { event.preventDefault(); form.handleSubmit(); }}>
      <ErlForm<FormValues>
        form={form}
        schema={schema}
        fieldConfig={{
          username: {
            label: "Username",
            placeholder: "Enter username",
          },
        }}
      />
      <button type="submit">Simpan</button>
    </form>
  );
}