Type of name prop on form.Field

[ravilamichhane]

I am migrating from react-hook-form to tanstack form.

I have a custom input component .
The code looked like this

import { FormDescription, FormField, FormItem, FormLabel, FormMessage } from '@tetoui/core/form'
import { Input, InputProps } from '@tetoui/core/input'
import { cn } from '@tetoui/utils'
import { Control, FieldValues, Path } from 'react-hook-form'

type TextareaInputProps<T extends FieldValues> = InputProps & {
  control: Control<T>
  name: Path<T>
  label?: string
  wrapperClassnName?: HTMLDivElement['className']
  description?: string
}

export const TextInput = <T extends FieldValues>({
  control,
  name,
  label,
  description,
  wrapperClassnName,
  ...props
}: TextareaInputProps<T>) => {
  return (
    <FormField
      control={control}
      name={name}
      render={({ field }) => (
        <FormItem className={cn('space-y-1', wrapperClassnName)}>
          {label && <FormLabel htmlFor={name}>{label}</FormLabel>}
          <Input
            {...props}
            id={name}
            value={field.value}
            onChange={e => {
              field.onChange(e)
              props.onChange?.(e)
            }}
          />
          {description && <FormDescription>{description}</FormDescription>}
          <FormMessage />
        </FormItem>
      )}
    />
  )
}

And I am using it like this

  const form = useForm<z.infer<typeof LoginSchema>>({
    defaultValues: {
      email: email || '',
      password: '',
    },
    resolver: zodResolver(LoginSchema),
    shouldUseNativeValidation: true,
  })

  <TextInput
            label={dictionary.email}
            control={form.control}
            required
            type="email"
            name="email"
            placeholder={dictionary['email_placeholder']}
          />

This way i am getting suggestions on the editor based on the type of form for the name prop

But I am struggling to get this type of behaviour whith tanstack form. I tried to look at the type of the name property and i am lost. For now i have added any.

import { useForm } from "@tanstack/react-form";

interface TextInputProps<T> {
  form: ReturnType<typeof useForm<T>>;
  name: any;
}

export const TextInput = <T,>({ form, name }: TextInputProps<T>) => {
  return (
    <form.Field
      name={name}
      children={(field) => <>{/* Input Goes here */}</>}
    />
  );
};

Thank you.

[crutchcorn]

There are going to be docs about how to do this prior to 1.x; I don't have any specific guidance here other than "Wish you the best"

[Balastrong]

With DeepKeys<FormSchema> you should be able to get some help from typescript in the name field.

I'd give this a try:

interface TextInputProps<T> {
  form: ReturnType<typeof useForm<T>>;
  name: DeepKeys<T>;
}

[crutchcorn]

Whoa, are the types really that easy nowadays? Can you message our maintainers' channel with a POC of this?

[anki247]

Seriously! This should be added to the doc.
Thank you @Balastrong 💪