TanStack•2w ago•

23 replies

rubber-blue

Intermediate types for expected missing input

I have a form where i want the user to select a date range :

Schema.Struct({
    # more stuff here
    startDate: Schema.Date,
    endDate: Schema.Date,
})

Schema.Struct({
    # more stuff here
    startDate: Schema.Date,
    endDate: Schema.Date,
})

now i want the default values to be

null

null

such that i can show the placeholder, so the user sees he has do select a date range. But if i do that i complains that the type is not asignable to the final type of the struct, but thats what i want.
I also have a title that is a string, there it is no problem to have the default value of

""

""

, even though the user then gets a message of "please no empty title" instead of "please enter a title".

Question

how do i handle such "intermediate" types? they are a super type of the final type but in generally omitable, in my example would have:

Schema.Struct({
    # more stuff here
    title: Schema.NullOr(Schema.String),
    startDate: Schema.NullOr(Schema.Date),
    endDate: Schema.NullOr(Schema.Date),
})

Schema.Struct({
    # more stuff here
    title: Schema.NullOr(Schema.String),
    startDate: Schema.NullOr(Schema.Date),
    endDate: Schema.NullOr(Schema.Date),
})

such that the field types are also

null | Date

null | Date

they are currently tied to the Schema that is used for the validation. something along those lines:

const form = useAppForm<Partial<typeof CreateBannerSchema.Type>>({
        defaultValues: { startDate: null, endDate: null },
        validators: { onSubmit: Schema.toStandardSchemaV1(CreateBannerSchema, { parseOptions: { errors: "all" } }) },
        onSubmit: async ({ value }) => await createAction.dispatch(value),
    });

const form = useAppForm<Partial<typeof CreateBannerSchema.Type>>({
        defaultValues: { startDate: null, endDate: null },
        validators: { onSubmit: Schema.toStandardSchemaV1(CreateBannerSchema, { parseOptions: { errors: "all" } }) },
        onSubmit: async ({ value }) => await createAction.dispatch(value),
    });

WIth:
1. the type of the validation scheme extends the generic
2. the type of value is the infered type of the validation

PS

also i am currently doing this to get the two dates wich feels bad:

<form.AppField name="startDate">
  {(startDateField) => (
    <form.AppField name="endDate">
      {(endDateField) => { 
        # Date range picker here         
      )}
    </form.AppField>
  )}
</form.AppField>

<form.AppField name="startDate">
  {(startDateField) => (
    <form.AppField name="endDate">
      {(endDateField) => { 
        # Date range picker here         
      )}
    </form.AppField>
  )}
</form.AppField>

Bildschirmfoto_2026-03-15_um_15.30.12.png

Intermediate types for expected missing input

I have a form where i want the user to select a date range :

Schema.Struct({
    # more stuff here
    startDate: Schema.Date,
    endDate: Schema.Date,
})

Schema.Struct({
    # more stuff here
    startDate: Schema.Date,
    endDate: Schema.Date,
})

now i want the default values to be

null

null

""

""

, even though the user then gets a message of "please no empty title" instead of "please enter a title".

Question

how do i handle such "intermediate" types? they are a super type of the final type but in generally omitable, in my example would have:

Schema.Struct({
    # more stuff here
    title: Schema.NullOr(Schema.String),
    startDate: Schema.NullOr(Schema.Date),
    endDate: Schema.NullOr(Schema.Date),
})

Schema.Struct({
    # more stuff here
    title: Schema.NullOr(Schema.String),
    startDate: Schema.NullOr(Schema.Date),
    endDate: Schema.NullOr(Schema.Date),
})

such that the field types are also

null | Date

null | Date

they are currently tied to the Schema that is used for the validation. something along those lines:

const form = useAppForm<Partial<typeof CreateBannerSchema.Type>>({
        defaultValues: { startDate: null, endDate: null },
        validators: { onSubmit: Schema.toStandardSchemaV1(CreateBannerSchema, { parseOptions: { errors: "all" } }) },
        onSubmit: async ({ value }) => await createAction.dispatch(value),
    });

const form = useAppForm<Partial<typeof CreateBannerSchema.Type>>({
        defaultValues: { startDate: null, endDate: null },
        validators: { onSubmit: Schema.toStandardSchemaV1(CreateBannerSchema, { parseOptions: { errors: "all" } }) },
        onSubmit: async ({ value }) => await createAction.dispatch(value),
    });

WIth:
1. the type of the validation scheme extends the generic
2. the type of value is the infered type of the validation

PS

also i am currently doing this to get the two dates wich feels bad:

<form.AppField name="startDate">
  {(startDateField) => (
    <form.AppField name="endDate">
      {(endDateField) => { 
        # Date range picker here         
      )}
    </form.AppField>
  )}
</form.AppField>

<form.AppField name="startDate">
  {(startDateField) => (
    <form.AppField name="endDate">
      {(endDateField) => { 
        # Date range picker here         
      )}
    </form.AppField>
  )}
</form.AppField>

Intermediate types for expected missing input

Question

PS

Intermediate types for expected missing input

Question

PS

Similar Threads