Union type issues using `withForm`

I almost got the pattern I like working, it works in runtime. But can't fix a few couple of type issues I'm running into

I have a

Contact

Contact

domain that has a create/patch endpoint

I'm trying to create a shared component

ContactFormFields

ContactFormFields

that can be used in both the create and patch contexts. I can check in runtime if we are doing a create or patch and render conditionally

These are my types

import type { MergeExclusive, RequiredDeep } from 'type-fest'

export type EditType = ContactType & ContactPatchType // ContactType has readonly properties like `id`, ContactPatchType has the properties that are editable
export type CreateType = RequiredDeep<ContactDataType> // ContactDataType contains properties that are used for initial create, so no `id` for example
type EitherType = MergeExclusive<CreateType, EditType>

import type { MergeExclusive, RequiredDeep } from 'type-fest'

export type EditType = ContactType & ContactPatchType // ContactType has readonly properties like `id`, ContactPatchType has the properties that are editable
export type CreateType = RequiredDeep<ContactDataType> // ContactDataType contains properties that are used for initial create, so no `id` for example
type EitherType = MergeExclusive<CreateType, EditType>

The shared component

export const ContactFormFields = withForm({
    // These values are only used for type-checking, and are not used at runtime
    // This allows you to `...formOpts` from `formOptions` without needing to redeclare the options
    defaultValues: {} as EitherType,
    props: {} as { type: 'create' | 'patch' },
    render: function Render({ form, type }) {
...

export const ContactFormFields = withForm({
    // These values are only used for type-checking, and are not used at runtime
    // This allows you to `...formOpts` from `formOptions` without needing to redeclare the options
    defaultValues: {} as EitherType,
    props: {} as { type: 'create' | 'patch' },
    render: function Render({ form, type }) {
...

My edit form - https://pastes.io/react-contactviewform-with-patch-form-type-error-comment

And there is a similar create form(leaving out cause this is getting too long for Discord)

I have 2 problems

Problem 1
In my edit and create forms I get a type error passing

form

form

ContactFormFields

ContactFormFields

(this is for

<ContactFormFields type="patch" form={form} />

<ContactFormFields type="patch" form={form} />

)
https://pastes.io/type-mismatches-for-formasyncvalidateorfn-and-formvalidateasyncfn

Problem 2
In the

ContactFormFields

ContactFormFields

<form.AppField name="id">
  //Would expect a type error here, type should be `string | undefined`, since `id` should only be defined if we are in a `patch` context. But the type is `string` currently!
  {(field) => <div>ID: {field.state.value.length}</div>}
</form.AppField>

<form.AppField name="id">
  //Would expect a type error here, type should be `string | undefined`, since `id` should only be defined if we are in a `patch` context. But the type is `string` currently!
  {(field) => <div>ID: {field.state.value.length}</div>}
</form.AppField>

Union type issues using `withForm`

I almost got the pattern I like working, it works in runtime. But can't fix a few couple of type issues I'm running into

I have a

Contact

Contact

domain that has a create/patch endpoint

I'm trying to create a shared component

ContactFormFields

ContactFormFields

that can be used in both the create and patch contexts. I can check in runtime if we are doing a create or patch and render conditionally

These are my types

import type { MergeExclusive, RequiredDeep } from 'type-fest'

export type EditType = ContactType & ContactPatchType // ContactType has readonly properties like `id`, ContactPatchType has the properties that are editable
export type CreateType = RequiredDeep<ContactDataType> // ContactDataType contains properties that are used for initial create, so no `id` for example
type EitherType = MergeExclusive<CreateType, EditType>

import type { MergeExclusive, RequiredDeep } from 'type-fest'

export type EditType = ContactType & ContactPatchType // ContactType has readonly properties like `id`, ContactPatchType has the properties that are editable
export type CreateType = RequiredDeep<ContactDataType> // ContactDataType contains properties that are used for initial create, so no `id` for example
type EitherType = MergeExclusive<CreateType, EditType>

The shared component

export const ContactFormFields = withForm({
    // These values are only used for type-checking, and are not used at runtime
    // This allows you to `...formOpts` from `formOptions` without needing to redeclare the options
    defaultValues: {} as EitherType,
    props: {} as { type: 'create' | 'patch' },
    render: function Render({ form, type }) {
...

export const ContactFormFields = withForm({
    // These values are only used for type-checking, and are not used at runtime
    // This allows you to `...formOpts` from `formOptions` without needing to redeclare the options
    defaultValues: {} as EitherType,
    props: {} as { type: 'create' | 'patch' },
    render: function Render({ form, type }) {
...

form

form

ContactFormFields

ContactFormFields

(this is for

<ContactFormFields type="patch" form={form} />

<ContactFormFields type="patch" form={form} />

)
https://pastes.io/type-mismatches-for-formasyncvalidateorfn-and-formvalidateasyncfn

Problem 2
In the

ContactFormFields

ContactFormFields

<form.AppField name="id">
  //Would expect a type error here, type should be `string | undefined`, since `id` should only be defined if we are in a `patch` context. But the type is `string` currently!
  {(field) => <div>ID: {field.state.value.length}</div>}
</form.AppField>

<form.AppField name="id">
  //Would expect a type error here, type should be `string | undefined`, since `id` should only be defined if we are in a `patch` context. But the type is `string` currently!
  {(field) => <div>ID: {field.state.value.length}</div>}
</form.AppField>

Union type issues using `withForm`

Union type issues using `withForm`

Similar Threads