Re-usable forms

[UltraWelfare]

My use-case is as following;
I have a rather complex "Create a Project" form. Some fields are dynamically generated from API queries, the validation schema is also dynamically generated.
This form exists in an authenticated route (/projects/create) but should also exist in the registration form... From the landing page you can click "Create a project" and in the case of not having an account, you can create a project and register at the same time.. Then all the data is being submitted at once.
I don't wanna copy-paste the whole create a project form into the registration page...

One way I thought of is to have two different useForms in the parent component; one for the project creation and once again for the registration. This is kinda "messy" and feels like a huge workaround but could work I guess?

Ideally what I was thinking was something like:

// components/projects/project-form.tsx

export type ProjectFormValues = {
   title: string;
   // omitted for brevity
}

export default function ProjectForm(props) {
   return <>
      <input {props.register(props.prefix + 'title')} />
   </>
}

// routes/auth/registration-form.tsx

type RegistrationFormValues = {
   username: string;
   // omitted for brevity
};
type FormValues = {
  register: RegistrationFormValues
  project: ProjectFormValues
};

export default function RegisterPage() {
  const formMethods = useForm<FormValues>();
  return <form submit={..}>
    <input {...formMethods.register('register.username')} />
    <ProjectForm {...formMethods} prefix={'project.'} />
  </form>
}

But this would completely destroy type-safety... Are there any good ideas on how to handle that?

[tamish-max]

I’d strongly lean toward one useForm for the final payload, not two separate forms.

Your target data shape is already a good fit for RHF:

type FormValues = {
  register: RegistrationFormValues
  project: ProjectFormValues
}

Then make the reusable project piece render fields only, and let the parent own the form instance:

function ProjectFields({ prefix }: { prefix: 'project' }) {
  const { register } = useFormContext<FormValues>()

  return (
    <input {...register(`${prefix}.title`)} />
  )
}

const methods = useForm<FormValues>()

<FormProvider {...methods}>
  <form onSubmit={methods.handleSubmit(onSubmit)}>
    <input {...methods.register('register.username')} />
    <ProjectFields prefix="project" />
  </form>
</FormProvider>

That way you keep one submission, one validation flow, and a reusable field group instead of duplicating the whole form.

So I’d think in terms of reusable field sections, not reusable useForm instances.

[DaCameraGirl]

The clean solution is the useFormContext + typed prefix pattern. You can maintain full type safety without duplicating anything.

The approach

Define your ProjectFormValues as a standalone type. When embedding in the registration form, use a path prefix ('project.') with TypeScript's template literal types to stay fully typed.

Step 1: ProjectForm uses useFormContext

// components/projects/project-form.tsx
import { useFormContext } from 'react-hook-form';

export type ProjectFormValues = {
  title: string;
  description: string;
  // ... your dynamic fields
};

interface ProjectFormProps {
  // Optional prefix for when this form is embedded in a parent
  prefix?: string;
}

export function ProjectForm({ prefix = '' }: ProjectFormProps) {
  const { register, formState: { errors } } = useFormContext();

  const field = (name: keyof ProjectFormValues) =>
    `${prefix}${String(name)}` as const;

  return (
    <>
      <input {...register(field('title'))} />
      {errors[field('title')] && <span>{errors[field('title')]?.message as string}</span>}
      <input {...register(field('description'))} />
    </>
  );
}

Step 2: Standalone create page

// app/projects/create/page.tsx
import { useForm, FormProvider } from 'react-hook-form';
import { zodResolver } from '@hookform/resolvers/zod';
import { projectSchema } from '@/schemas/project';
import { ProjectForm, type ProjectFormValues } from '@/components/projects/project-form';

export default function CreateProjectPage() {
  const form = useForm<ProjectFormValues>({
    resolver: zodResolver(projectSchema),
  });

  return (
    <FormProvider {...form}>
      <form onSubmit={form.handleSubmit(onSubmit)}>
        <ProjectForm /> {/* no prefix — top-level fields */}
        <button type="submit">Create</button>
      </form>
    </FormProvider>
  );
}

Step 3: Registration page with embedded project form

// Combined registration + project creation form type
type RegistrationWithProjectValues = {
  username: string;
  email: string;
  password: string;
  project: ProjectFormValues; // nested under 'project'
};

import { useForm, FormProvider } from 'react-hook-form';

export default function RegistrationPage() {
  const form = useForm<RegistrationWithProjectValues>({
    resolver: zodResolver(registrationWithProjectSchema),
  });

  const onSubmit = async (data: RegistrationWithProjectValues) => {
    // data.project contains the full typed ProjectFormValues
    await registerUser(data);
  };

  return (
    <FormProvider {...form}>
      <form onSubmit={form.handleSubmit(onSubmit)}>
        <input {...form.register('username')} />
        <input {...form.register('email')} />
        <input {...form.register('password')} />
        <ProjectForm prefix="project." /> {/* embeds under project.* namespace */}
        <button type="submit">Register & Create Project</button>
      </form>
    </FormProvider>
  );
}

For dynamic validation schemas

Since your validation schema is dynamically generated, build it per-route:

// schemas/project.ts
export const buildProjectSchema = (dynamicFields: DynamicField[]) =>
  z.object({
    title: z.string().min(1),
    ...buildDynamicFieldSchema(dynamicFields),
  });

// Registration schema wraps the project schema
export const buildRegistrationSchema = (dynamicFields: DynamicField[]) =>
  z.object({
    username: z.string().min(3),
    email: z.string().email(),
    password: z.string().min(8),
    project: buildProjectSchema(dynamicFields), // nested
  });

Why this preserves type safety

FormProvider passes the typed form context through React context, and useFormContext() in ProjectForm picks it up. The prefix prop ensures field registration paths match the nested type structure (project.title, project.description), and Zod validates both the outer registration fields and the nested project fields in one pass.