Fields depending on other fields

[Southclaws]

Bit of a complex one and might be a job for a layer on top of Zod but I couldn't find a similar issue so figured I'd open one.

I have a data structure that has a couple of fields that are required only if another field is set to some value.

z.object({
  entity: z.enum(["individual", "business"]),

  firstName: z.string(),
  lastName: z.string(),

  companyName: z.string(),
  companyNumber: z.string(),
});

If entity is individual then the company name and number are not required at all, but if entity is business then they are required.

What's the best way to go about this? I was thinking refine but there's no access to the object within this function, another method I could think of was something akin to a tagged type union:

type GeneralFields = { firstName: string; lastName: string }

type IndividualFields = { entity: "individual" } & GeneralFields 

type BusinessFields = { entity: "business" } & {
  companyName: string;
  companyNumber: string;
}

type Fields = IndividualFields | BusinessFields;

Is this possible to express with Zod?

Thanks for such a great library!

[lorefnon]

You can express the second example in zod as follows:

const CompanyFields = z.object({ companyName: z.string(), companyNumber: z.string() })

const GeneralFields = z.object({ firstName: z.string(), lastName: z.string() })

const IndividualFields = z.object({ entity: z.literal("individual") }).and(GeneralFields)

const BusinessFields = z.object({ entity: z.literal("business") }).and(CompanyFields)

const Fields = IndividualFields.or(BusinessFields)

[whengely]

How can I access the errors for this schema? It used to work but now I can only access the literal property.

zod: 3.11.6
typescript: 4.5.5
react hook form: 7.27.0
@hookform/resolvers: 2.8.8

[JacobWeisenburger]

@whengely Please send either the code that is causing a problem or the error that you are getting.

[whengely]

@JacobWeisenburger

Sorry it took a couple days, I created a repo. npm install then npm start should throw an error around errors.firstName. I tried to narrow the object, which in previous versions we didn't have to do, and it still doesn't work. How is this supposed to be handled?

https://github.com/whengely/zod-hook-form

Thanks!

[JacobWeisenburger]

ERROR in src/App.tsx:39:59

TS2339: Property 'firstName' does not exist on type '{ type?: FieldError | undefined; firstName?: FieldError | undefined; lastName?: FieldError | undefined; } | { type?: FieldError | undefined; organizationName?: FieldError | undefined; }'.
  Property 'firstName' does not exist on type '{ type?: FieldError | undefined; organizationName?: FieldError | undefined; }'.
    37 |         )}
    38 |       </div>
  > 39 |       <div>First Name error: {type === 'Person' && errors.firstName}</div>
       |                                                           ^^^^^^^^^
    40 |       <div>
    41 |         <button type="submit">Submit</button>
    42 |       </div>

This seems to be a problem with react-hook-form, because below doesn't cause any errors

const personSchema = z.object( {
    type: z.literal( 'Person' ),
    firstName: z.string().nonempty(),
    lastName: z.string().nonempty(),
} )

const organizationSchema = z.object( {
    type: z.literal( 'Organization' ),
    organizationName: z.string().nonempty()
} )

const formSchema = z.union( [ personSchema, organizationSchema ] )
type FormSchema = z.infer<typeof formSchema>

const person: FormSchema = {
    type: 'Person',
    firstName: 'John',
    lastName: 'Doe'
} // works fine

const organization: FormSchema = {
    type: 'Organization',
    organizationName: 'Acme Inc.'
} // works fine

[JacobWeisenburger]

It seems to me that this issue should be discussed in a new discussion, because it's not answering the original question. If you want to keep talking about this, I would suggest you make a new discussion.

[whengely]

Thanks for your help. Created an issue in the @hookform/resolvers github. react-hook-form/resolvers#352