How to make part of the forms reusable?

[thefrana]

Hi,
I wanted to create some reusable parts of the form. For example, we have several forms but they share customer data section. The problem is that I cannot get the types right.

// this is my form definition
const form useForm({
  defaultValues: {
    customerData: {
      email: "",
      phone: "",
      name: "",
      surname: "",
      note: "",
    },
  },
})

// it generates this type
type Form = ReactFormExtendedApi<{
    customerData: {
        email: string;
        phone: string;
        name: string;
        surname: string;
        note: string;
    };
}, undefined>

// then used like
<SectionCustomerData
  form={form} // here is thrown the error
/>

Then I want to use it like this in reused component

export function SectionCustomerData({
  form,
}: {
  form: ReactFormExtendedApi<
    {
      customerData: {
        name: string;
        surname: string;
      };
    },
    undefined
  >;
}) {

// just an example, but it should be enough
return <form.Field
  name="customerData.name"
  children={(field) => (
    <InputField
      labelProps={{
        htmlFor: field.name,
      }}
      inputProps={{
        value: field.state.value,
        onChange: (e) => field.handleChange(e.target.value),
        onBlur: field.handleBlur,
      }}
      errors={field.state.meta.errors}
    />
  )}
/>
}

The problem is the types are incompatible??? I really do not understand it, because the form fields in the SectionCustomerData are clearly only a subset of the bigger form.

Can you help me?

Thanks

[thefrana]

I also tried some generics magic yet with no result.

[vonazt]

@thefrana We accomplished this by doing something like this:

type Person = {
  name: string;
  age: number;
};

type Car = {
  make: string;
  model: string;
};

const form = useForm({ defaultValues: { name: 'foo', age: 22 } });

type AllForms = Car | Person;

type InputProps<
  TForm extends AllForms,
  TField extends DeepKeys<TForm> = DeepKeys<TForm>
> = {
  form: FormApi<TForm, undefined> & ReactFormApi<TForm, undefined>;
  name: TField;
};

function Input<
  TForm extends AllForms,
  TField extends DeepKeys<TForm> = DeepKeys<TForm>
>({ form, name }: InputProps<TForm, TField>) {
  return (
    <form.Field name={name}>
      {field => (
        <input
          value={typeof field.state.value === 'string' ? field.state.value : ''}
          onChange={e =>
            field.handleChange(
              e.target.value as Updater<DeepValue<TForm, TField>>
            )
          }
        />
      )}
    </form.Field>
  );
}

The main issue is having to cast for the onChange. It makes sense as there's no guarantee what that type will be based on the form. You can pass the onChange to the parent component and do something like:

handleChange={(value: string) =>
     form
     .getFieldInfo('name')
     .instance?.handleChange(value)
}

but you don't get any type safety on value. It does, however, correctly handle onChange validation. Or you could do

handleChange={(value: string) =>
  form.setFieldValue('name', value)
}

and you get type safety but I haven't been able to clear the error if there is one.

The casting isn't too big a problem for us as we use strict Zod schema to validate our forms, so even if there is an incorrect type passed to the input, it'll get caught in the validators.

[harry-whorlow]

@thefrana the answer to your question is "you'll need to wait"...

Theres an open PR #825 that will allow you to create re-usable components. But, it's not merged yet, theres a few internal types that need to be exposed, so unless you want to recreate them in your local code base you'll have to wait.

As you'll see from everyones else’s attempts (including my own #1084), you run into typing issues, and this only becomes more of an issue the more you have things like validators, listeners, and other functionality.

But the maintainers are working on it, in-face it's the last checkmark on the v1.0 checklist, so you wont have to wait long.

Hope this helps 🤟

[thefrana]

Awesome! Thank you very much for the explanation.

[epenflow]

Here's an example reusable form component using tanstack form and shadcn. you can check this repo :

import { useForm } from "@tanstack/react-form";
import * as z from "zod";
import Button from "../ui/button";
import Form, { ForFormField, FormSubscriber } from "../ui/form";
import type { FormFieldSchema } from "../ui/form/type";

const signUpSchema = z.object({
  username: z
    .string()
    .min(1, "Username is required")
    .regex(
      /^[a-z0-9._]+$/,
      "Username must contain only lowercase letters, numbers, dots, or underscores"
    ),
  password: z
    .string()
    .min(8, "Password must be at least 8 characters long")
    .regex(
      /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,}$/,
      "Password must contain at least one uppercase letter, one lowercase letter, one number, and one special character"
    ),
});
type TSignUpSchema = z.infer<typeof signUpSchema>;
const SIGN_UP_SCHEMA: FormFieldSchema<TSignUpSchema>[] = [
  {
    name: "username",
    label: "Username",
    type: "text",
    autoComplete: "username",
    description: "Enter your unique username 🌟",
    placeholder: "e.g., john_doe123",
  },
  {
    name: "password",
    label: "Password",
    type: "text",
    description: "Create a strong password 🔒",
    placeholder: "e.g., P@ssw0rd!",
  },
];

const Auth = () => {
  const form = useForm<TSignUpSchema>({
    defaultValues: {
      username: "",
      password: "",
    },
    validators: {
      onChange: signUpSchema,
      onChangeAsync: signUpSchema,
      onChangeAsyncDebounceMs: 500,
    },
    onSubmit: async (props) => {
      return new Promise((resolve) => {
        setTimeout(() => {
          console.log(props);
          resolve(props);
        }, 10_000);
      });
    },
  });

  return (
    <div className=" container h-dvh flex items-center justify-center">
      <Form
        className="bg-card w-96 border rounded-xl py-12 px-6 space-y-4"
        form={form}>
        <ForFormField form={form} schemas={SIGN_UP_SCHEMA} />
        <FormSubscriber form={form}>
          {({ canSubmit, isSubmitting }) => (
            <Button disabled={!canSubmit} isLoading={isSubmitting}>
              {({ disabled, isLoading }) => {
                return (
                  <span>
                    {isLoading
                      ? "In progress..."
                      : disabled
                      ? "Complete the required fields"
                      : "Submit"}
                  </span>
                );
              }}
            </Button>
          )}
        </FormSubscriber>
      </Form>
    </div>
  );
};
export default Auth;

import { Slot } from "@radix-ui/react-slot";
import {
  functionalUpdate,
  useField,
  type DeepKeys,
  type DeepValue,
  type Validator,
} from "@tanstack/react-form";
import React from "react";
import For from "~/components/layout/for";
import { cn, withMemo } from "~/lib/utils";
import {
  extendChildren,
  useExtendChildren,
  useExtendClassName,
} from "../helper";
import Input from "../input";
import Label from "../label";
import {
  FormFieldContext,
  FormItemContext,
  onChangeExtend,
  onSubmitExtend,
  useFormField,
} from "./helper";
import {
  type AnyFieldApi,
  type ForFormFieldProps,
  type FormControlProps,
  type FormDescriptionProps,
  type FormFieldProps,
  type FormItemProps,
  type FormLabelProps,
  type FormMessageProps,
  type FormProps,
  type FormSubscriberProps,
} from "./type";

const Form = withMemo(
  <
    TFormData,
    TFormValidator extends Validator<TFormData, unknown> | undefined = undefined
  >({
    onSubmit,
    form,
    ...props
  }: FormProps<TFormData, TFormValidator>): React.ReactNode => {
    return (
      <form
        onSubmit={
          typeof onSubmit === "undefined"
            ? onSubmitExtend(form.handleSubmit)
            : onSubmit
        }
        {...props}
      />
    );
  }
);
export default Form;

export const FormField = withMemo((<
  TParentData,
  TName extends DeepKeys<TParentData>,
  TFieldValidator extends
    | Validator<DeepValue<TParentData, TName>, unknown>
    | undefined = undefined,
  TFormValidator extends
    | Validator<TParentData, unknown>
    | undefined = undefined,
  TData extends DeepValue<TParentData, TName> = DeepValue<TParentData, TName>
>({
  children,
  render,
  ...fieldOptions
}: FormFieldProps<
  TParentData,
  TName,
  TFieldValidator,
  TFormValidator,
  TData
>) => {
  const fieldApi = useField(fieldOptions);

  if (children && render) {
    throw new Error(
      'Only one of "children" or "render" should be provided, not both.'
    );
  }

  const jsxToDisplay = React.useMemo(
    () =>
      functionalUpdate(children ? children : render ? render : null, fieldApi),
    // eslint-disable-next-line react-hooks/exhaustive-deps
    [children, render, fieldApi.state.value, fieldApi.state.meta]
  );

  return (
    <FormFieldContext value={fieldApi}>{jsxToDisplay}</FormFieldContext>
  ) as never;
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
}) satisfies React.FC<FormFieldProps<any, any, any, any, any>>);

export const FormSubscriber = withMemo(
  <
    TFormData,
    TFormValidator extends Validator<TFormData, unknown> | undefined = undefined
  >({
    form,
    children,
    render,
  }: FormSubscriberProps<TFormData, TFormValidator>) => {
    return (
      <form.Subscribe selector={(selector) => [selector]}>
        {([selector]) =>
          extendChildren({ children, render, context: selector })
        }
      </form.Subscribe>
    );
  }
);
export const ForFormField = withMemo(
  <
    TFormData,
    TFormValidator extends Validator<TFormData, unknown> | undefined
  >({
    form,
    schemas,
  }: ForFormFieldProps<TFormData, TFormValidator>) => {
    return (
      <For
        each={schemas}
        render={(schema, key) => {
          return (
            // eslint-disable-next-line @typescript-eslint/no-explicit-any
            <FormField<any, any, any, any, any>
              key={key}
              form={form}
              name={schema.name}
              render={(field: AnyFieldApi) => {
                return (
                  <FormItem>
                    <FormLabel>{schema.label}</FormLabel>
                    <FormControl>
                      <Input
                        className="placeholder:text-xs"
                        onChange={onChangeExtend(field.handleChange)}
                        onBlur={field.handleBlur}
                        autoComplete={schema.autoComplete}
                        placeholder={schema.placeholder}
                        type={schema.type}
                      />
                    </FormControl>
                    <FormMessage>{schema.description}</FormMessage>
                  </FormItem>
                );
              }}
            />
          );
        }}
      />
    );
  }
);
export const FormItem: React.FC<FormItemProps> = ({
  className,
  children,
  render,
  ...props
}) => {
  const id = React.useId();
  const jsxToDisplay = useExtendChildren({ context: { id }, children, render });

  return (
    <FormItemContext value={{ id }}>
      <div className={cn("space-y-2 flex flex-col", className)} {...props}>
        {jsxToDisplay}
      </div>
    </FormItemContext>
  );
};
FormItem.displayName = "FormItem";
export const FormLabel: React.FC<FormLabelProps> = ({
  className: _className,
  children,
  render,
  ...props
}) => {
  const field = useFormField();
  const jsxToDisplay = useExtendChildren({ children, render, context: field });
  const className = useExtendClassName({
    className: _className,
    context: field,
  });

  return (
    <Label
      className={cn(field.error && "text-destructive", className)}
      htmlFor={field.formItemId}
      {...props}>
      {jsxToDisplay}
    </Label>
  );
};
FormLabel.displayName = "FormLabel";

export const FormControl: React.FC<FormControlProps> = ({
  children,
  className: _className,
  render,
  ...props
}) => {
  const field = useFormField();
  const jsxToDisplay = useExtendChildren({ context: field, children, render });
  const className = useExtendClassName({
    context: field,
    className: _className,
  });

  return (
    <Slot
      id={field.formItemId}
      className={className}
      aria-describedby={
        !field.error
          ? `${field.formDescriptionId}`
          : `${field.formDescriptionId} ${field.formMessageId}`
      }
      aria-invalid={!!field.error}
      {...props}>
      {jsxToDisplay}
    </Slot>
  );
};
FormControl.displayName = "FormControl";

export const FormDescription: React.FC<FormDescriptionProps> = ({
  className: _className,
  children,
  render,
  ...props
}) => {
  const field = useFormField();
  const jsxToDisplay = useExtendChildren({ context: field, children, render });
  const className = useExtendClassName({
    className: _className,
    context: field,
  });

  return (
    <p
      id={field.formDescriptionId}
      className={cn("text-[0.8rem] text-muted-foreground", className)}
      {...props}>
      {jsxToDisplay}
    </p>
  );
};
FormDescription.displayName = "FormDescription";

export const FormMessage: React.FC<FormMessageProps> = ({
  className: _className,
  children,
  render,
  ...props
}) => {
  const field = useFormField();

  const jsxToDisplay = React.useMemo(
    () =>
      field.error
        ? field.message
        : extendChildren({ context: field, children, render }),
    [field, children, render]
  );
  const className = useExtendClassName({
    className: _className,
    context: field,
  });

  if (!jsxToDisplay) {
    return null;
  }

  return (
    <p
      id={field.formMessageId}
      className={cn(
        "text-[0.8rem] font-medium text-muted-foreground",
        field.error && "text-destructive",
        className
      )}
      {...props}>
      {jsxToDisplay}
    </p>
  );
};
FormMessage.displayName = "FormMessage";

[harry-whorlow]

@epenflow, I'll copy this over from the discord, but the maintainers strongly discourage using useField outside of the library, as it's supposed to be an internal hook.

While if you really need the reusable form fields you can rebuild it like you have done, and also I tried... But, if you can wait a couple weeks, you're probably better waiting, than having to rewrite all your components.

I'm sure the maintainer are feeling some pressure getting this delivered as it seems every other day someone is asking in the discord on how to do it. 🤟