TanStack Form Example

gistfile1.js

//{schema.fields.map((field) => (
"use client";
import { zodValidator } from "@tanstack/zod-form-adapter";
import { z } from "zod";
import type { FieldApi } from "@tanstack/react-form";
import { useForm, formOptions } from "@tanstack/react-form";


function FieldInfo({ field }: { field: FieldApi<any, any, any, any> }) {
  return (
    <>
      {field.state.meta.touchedErrors ? (
        <em>{field.state.meta.touchedErrors}</em>
      ) : null}
      {field.state.meta.isValidating ? "Validating..." : null}
    </>
  );
}

function Input({ field }: { field: FieldApi<any, any, any, any> }) {
  return (
    <>
      <h1>Field API</h1>
      <input
        value={field.state.value}
        onBlur={field.handleBlur}
        onChange={(e) => field.handleChange(e.target.value)}
      />
      <FieldInfo field={field} />
      {/* <pre>{JSON.stringify(field, null, 2)}</pre> */}
    </>
  );
}

export default function Page() {
  const formOpts = formOptions<Person>({
    defaultValues: {
      firstName: "",
      lastName: "",
      age: 0,
      hobbies: [],
      test: {},
    },
  });

  const form = useForm({
    ...formOpts,
    onSubmit: async ({ value }) => {
      // Do something with form data
      console.log(value);
    },
    // validators: {
    //   // Add validators to the form the same way you would add them to a field
    //   onChange({ value }) {
    //     if (value.age < 13) {
    //       return "Must be 13 or older to sign";
    //     }
    //     return undefined;
    //   },
    // },
  });

  const formErrorMap = form.useStore((state) => state.errorMap);

  return (
    <div>
      <h1>Form</h1>
      {/* <pre>{JSON.stringify(form, null, 2)}</pre> */}
      <form
        onSubmit={(e) => {
          e.preventDefault();
          e.stopPropagation();
          form.handleSubmit();
        }}
      >
        <form.Field
          name="age"
          validatorAdapter={zodValidator()}
          validators={{
            onChange: z
              .string()
              .min(3, "First name must be at least 3 characters")
              .refine((value) => !/\s/.test(value), {
                message: "First name must not contain spaces",
              }),
          }}
          children={(field) => <Input field={field} />}
        />
        <form.Field name="cat" children={(field) => <Input field={field} />} />

        <form.Subscribe
          selector={(state) => [state.canSubmit, state.isSubmitting]}
          children={([canSubmit, isSubmitting]) => (
            <button type="submit" disabled={!canSubmit}>
              {isSubmitting ? "..." : "Submit"}
            </button>
          )}
        />
        <button type="reset" onClick={() => form.reset()}>
          Reset
        </button>
        <div>
          {/* ... */}
          {formErrorMap.onChange ? (
            <div>
              <em>There was an error on the form: {formErrorMap.onChange}</em>
            </div>
          ) : null}
          {/* ... */}
        </div>
      </form>
    </div>
  );
}