T
TanStack•4w ago
multiple-amethyst

How to type formOptions

Hy everyone, someone can say me, if it's possible a type formOptions and if yes how to ? Code : 
import { useAppForm } from '@/context/FormContext';
import { formOptions } from '@tanstack/form-core';

const sortedFormOpts = formOptions({
  defaultValues: {
    projects: '',
    profiles: '', 
    opportunities: '',
    todos: '',
    quotes: '',
    beginMoment: '',
    endMoment: '',
  },
});
export function useSortedForm() {
  return useAppForm({ ...sortedFormOpts });
}

export type SortedFormType = ReturnType<typeof useSortedForm>;
export type SortedFormValues = (typeof sortedFormOpts)['defaultValues'];
import { useAppForm } from '@/context/FormContext';
import { formOptions } from '@tanstack/form-core';

const sortedFormOpts = formOptions({
  defaultValues: {
    projects: '',
    profiles: '', 
    opportunities: '',
    todos: '',
    quotes: '',
    beginMoment: '',
    endMoment: '',
  },
});
export function useSortedForm() {
  return useAppForm({ ...sortedFormOpts });
}

export type SortedFormType = ReturnType<typeof useSortedForm>;
export type SortedFormValues = (typeof sortedFormOpts)['defaultValues'];
5 Replies
deep-jade
deep-jade•4w ago
i'm not 100% sure if its the correct way or if its exactly your question, but something like this worked for me with typing my formopts 
export const courseFormOpts = {
  defaultValues: { courseId: "" as string, modules: [] as ModuleSnap[] },
}
export const courseFormOpts = {
  defaultValues: { courseId: "" as string, modules: [] as ModuleSnap[] },
}
or do you mean that the formOptions is the type?
vicious-gold
vicious-gold•4w ago
The code you sent is a very overcomplicated way of just doing 
const defaultValues = {
    projects: '',
    profiles: '', 
    opportunities: '',
    todos: '',
    quotes: '',
    beginMoment: '',
    endMoment: '',
}

type SortedFormValues = typeof defaultValues
const defaultValues = {
    projects: '',
    profiles: '', 
    opportunities: '',
    todos: '',
    quotes: '',
    beginMoment: '',
    endMoment: '',
}

type SortedFormValues = typeof defaultValues
The much easier approach would be to type your expected values and base the default values off of them: 
interface SortedFormValues {
    projects: string
    profiles: string
    opportunities: string
    todos: string
    quotes: string
    beginMoment: string
    endMoment: string
}

// type-safe assignment
const emptyValues: SortedFormValues = {
  projects: '',
  profiles: '', 
  opportunities: '',
  todos: '',
  quotes: '',
  beginMoment: '',
  endMoment: '',
}

export function useSortedForm() {
  return useAppForm({ defaultValues: emptyValues });
}
interface SortedFormValues {
    projects: string
    profiles: string
    opportunities: string
    todos: string
    quotes: string
    beginMoment: string
    endMoment: string
}

// type-safe assignment
const emptyValues: SortedFormValues = {
  projects: '',
  profiles: '', 
  opportunities: '',
  todos: '',
  quotes: '',
  beginMoment: '',
  endMoment: '',
}

export function useSortedForm() {
  return useAppForm({ defaultValues: emptyValues });
}
if you were also looking for the recommended pattern, see the comment above ^
multiple-amethyst
multiple-amethystOP•4w ago
okey so it's not possible with formOptions ?
vicious-gold
vicious-gold•4w ago
not only way more complicated, but pointless. formOptions infers from the types you give it, so if you need the types from formOptions, you can just go to the source
multiple-amethyst
multiple-amethystOP•4w ago
ok ty

Did you find this page helpful?