Integrating RHF with Zod: Merging 'Create' and 'Update' Forms with TypeScript emits Type Error

[kenfdev]

Hello everyone!

I'm integrating RHF with Zod and encountering a TypeScript error that's been a bit challenging to resolve.

My use case involves using a form to either 'create' a resource or 'update' it. Although this is a common scenario, my schemas for both 'create' and 'update' are distinct.

Here's a brief representation of the schemas:

CreateSchema

const createFormSchema = z.object({
  firstName: z.string(),
  age: z.string(),
  hiddenField: z.string().default('this is a hidden field'), // exclusive to the create schema
});

UpdateSchema

const updateFormSchema = z.object({
  id: z.string().default('some-id'), // exclusive to the update schema
  firstName: z.string(),
  age: z.string(),
});

Both schemas share the firstName and age fields. Even though they have unique fields (hiddenField for create and id for update), the form's UI remains consistent.

To maximize code reuse, I've devised a BaseForm component for both creation and updating. This component accepts register and errors as props, both originating from RHF.

type BaseSchema = {
  [K in keyof CreateFormSchema & keyof UpdateFormSchema]:
    | CreateFormSchema[K]
    | UpdateFormSchema[K];
};

interface Props {
  onSubmit: () => void;
  register: UseFormRegister<BaseSchema>;
  errors: FieldErrors<BaseSchema>;
}

export default function BaseForm({ onSubmit, register, errors }: Props) {
  return (
    <form onSubmit={onSubmit}>
      <label htmlFor="firstName">First Name</label>
      <input id="firstName" {...register('firstName')} />
      <p>{errors.firstName?.message}</p>

      <label htmlFor="age">Age</label>
      <input id="age" {...register('age')} />
      <p>{errors.age?.message}</p>

      <input type="submit" />
    </form>
  );
}

This approach seemed to be functional until I tried integrating this generic form within either the CreateForm or UpdateForm component. At this point, TypeScript raised errors about missing properties.

I was surprised that register would demand a field that is specific to only one of the schemas (like hiddenField).

Could anyone guide me on what might be amiss? I'm contemplating if separate schemas might be inappropriate for this scenario. Perhaps using a discriminated union might be a better alternative? (Although, I'm not entirely sure 🤔)

I've set up a minimal reproduction and a related PR for a clearer understanding:

View the PR and Issue Here

Thank you for your assistance!