TanStack•4mo ago•

15 replies

popular-magenta

more laxist input types while keeping tight output types

I implemented a wrapper around the

useForm

useForm

param to avoid having to pass the whole

defaultValues

defaultValues

data structure when creating a form (which honestly is quite cumbersome when all values are undefined by default). i had to combine the types of the input schema and default values in order to stitch back the form types to make tsc happy. here's the function:

export function formConfig<Schema extends z.ZodObject, Defaults extends object>({
  defaultValues,
  schema,
  onSubmit,
}: {
  defaultValues?: Defaults
  schema: Schema
  onSubmit: (props: { value: z.output<Schema> & Defaults }) => void
}) {
  return {
    defaultValues: defaultValues as z.input<Schema> & Defaults,
    validators: {
      onSubmit: ({ value }) => {
        const result = schema.safeParse({
          ...defaultValues,
          ...value,
        })

        return result.success ? undefined : result.error
      },
    },
    onSubmit,
    onSubmitInvalid: (args) => console.log(args),
  }
}

export function formConfig<Schema extends z.ZodObject, Defaults extends object>({
  defaultValues,
  schema,
  onSubmit,
}: {
  defaultValues?: Defaults
  schema: Schema
  onSubmit: (props: { value: z.output<Schema> & Defaults }) => void
}) {
  return {
    defaultValues: defaultValues as z.input<Schema> & Defaults,
    validators: {
      onSubmit: ({ value }) => {
        const result = schema.safeParse({
          ...defaultValues,
          ...value,
        })

        return result.success ? undefined : result.error
      },
    },
    onSubmit,
    onSubmitInvalid: (args) => console.log(args),
  }
}

used as:

const form = useForm(
  formConfig({
    defaultValues: {}, // becomes optional and can be partial,
    schema: someZodSchema,
    onSubmit({ value }) => {}, // value is union of defaultValues and z.output<schema>
  })
)

const form = useForm(
  formConfig({
    defaultValues: {}, // becomes optional and can be partial,
    schema: someZodSchema,
    onSubmit({ value }) => {}, // value is union of defaultValues and z.output<schema>
  })
)

it does work well to one exception: i wished to add that the type representing the form's values (i guess,

typeof defaultValues

typeof defaultValues

) would be wrapped Partial to support the pristine and reset states of the inputs from types PoV. When i change:

- defaultValues: defaultValues as z.input<Schema> & Defaults,
+ defaultValues: defaultValues as Partial<z.input<Schema>> & Defaults,

- defaultValues: defaultValues as z.input<Schema> & Defaults,
+ defaultValues: defaultValues as Partial<z.input<Schema>> & Defaults,

i get a type mismatch

Types of property 'defaultValues' are incompatible.

Types of property 'defaultValues' are incompatible.

. I'm a bit lost at this error because i only declare (and cast) the

defaultValues

defaultValues

so the comparison with another

defaultValues

defaultValues

might not come from me.

1. Is there a way to decouple the form values

defaultValues

defaultValues

from the rest of the lib
2. Or is there another way to achieve what i want to do?

more laxist input types while keeping tight output types

I implemented a wrapper around the

useForm

useForm

param to avoid having to pass the whole

defaultValues

defaultValues

export function formConfig<Schema extends z.ZodObject, Defaults extends object>({
  defaultValues,
  schema,
  onSubmit,
}: {
  defaultValues?: Defaults
  schema: Schema
  onSubmit: (props: { value: z.output<Schema> & Defaults }) => void
}) {
  return {
    defaultValues: defaultValues as z.input<Schema> & Defaults,
    validators: {
      onSubmit: ({ value }) => {
        const result = schema.safeParse({
          ...defaultValues,
          ...value,
        })

        return result.success ? undefined : result.error
      },
    },
    onSubmit,
    onSubmitInvalid: (args) => console.log(args),
  }
}

export function formConfig<Schema extends z.ZodObject, Defaults extends object>({
  defaultValues,
  schema,
  onSubmit,
}: {
  defaultValues?: Defaults
  schema: Schema
  onSubmit: (props: { value: z.output<Schema> & Defaults }) => void
}) {
  return {
    defaultValues: defaultValues as z.input<Schema> & Defaults,
    validators: {
      onSubmit: ({ value }) => {
        const result = schema.safeParse({
          ...defaultValues,
          ...value,
        })

        return result.success ? undefined : result.error
      },
    },
    onSubmit,
    onSubmitInvalid: (args) => console.log(args),
  }
}

used as:

const form = useForm(
  formConfig({
    defaultValues: {}, // becomes optional and can be partial,
    schema: someZodSchema,
    onSubmit({ value }) => {}, // value is union of defaultValues and z.output<schema>
  })
)

const form = useForm(
  formConfig({
    defaultValues: {}, // becomes optional and can be partial,
    schema: someZodSchema,
    onSubmit({ value }) => {}, // value is union of defaultValues and z.output<schema>
  })
)

it does work well to one exception: i wished to add that the type representing the form's values (i guess,

typeof defaultValues

typeof defaultValues

) would be wrapped Partial to support the pristine and reset states of the inputs from types PoV. When i change:

- defaultValues: defaultValues as z.input<Schema> & Defaults,
+ defaultValues: defaultValues as Partial<z.input<Schema>> & Defaults,

- defaultValues: defaultValues as z.input<Schema> & Defaults,
+ defaultValues: defaultValues as Partial<z.input<Schema>> & Defaults,

i get a type mismatch

Types of property 'defaultValues' are incompatible.

Types of property 'defaultValues' are incompatible.

. I'm a bit lost at this error because i only declare (and cast) the

defaultValues

defaultValues

so the comparison with another

defaultValues

defaultValues

might not come from me.

1. Is there a way to decouple the form values

defaultValues

defaultValues

from the rest of the lib
2. Or is there another way to achieve what i want to do?

more laxist input types while keeping tight output types

more laxist input types while keeping tight output types

Similar Threads