manual-pink

Any ideas for this use case?

I'm dealing with a complex form with dropdowns, inputs, datepickers, etc. Most of these inputs are rendered conditionally based on other previous selections, apart from that some dropdowns get data from APIs. I need to split this big form in chunks and add some suspense wrappers. How can I deal with this using tanstack form? I've read a lot of the GitHub issues/discussions and got few ideas but nothing clear. Passing down the form instance is not recommended by one of the tanstack form maintainers, so then what options do I have? All the examples works fine if you have 2-5 inputs, but if you have conditional fields, or other complex cases you ended up with a big file +500 LOC like me. Please, tanstack maintainers, any workaround for this? I'm open to any suggestions. I'm implementing all the tanstack suite in prod for 2 new projects and I need to get a way to fix this by Monday if possible, if not probably I'll have to move to react-hook-form even when we like tanstack form due to this use-case we need to support. Thanks

23 Replies

other-emerald•9mo ago

This is an interesting approach wrapping Form to make it scale https://github.com/nekochan0122/tanstack-boilerplate/blob/main/src/components/ui/form.tsx

GitHub

tanstack-boilerplate/src/components/ui/form.tsx at main · nekochan0...

A fully type-safe boilerplate with a focus on UX and DX, complete with multiple examples. - nekochan0122/tanstack-boilerplate

manual-pinkOP•9mo ago

Is there any update on this one https://github.com/TanStack/form/pull/825

GitHub

[WIP] Shared Component Library Docs by crutchcorn · Pull Request #8...

This PR: Adds an example of moving TanStack Form into your own shared component library Adds the docs to explain what the example is doing

manual-pinkOP•9mo ago

It looks like a patch on top of tanstack form for me tbh @Leonardo what are the trade off of passing the form instance as prop to a children components? I think that's my main doubt Crutchron doesn't recommend that approach in his PR, I'd like to get more context. If he doesn't recommend it, are you guys planning on a better way to handle that?

rising-crimson•9mo ago

I've seen this one. But frankly, when I look at the amount of types in play. It's horrific. I don't understand any of this at all. 😅 I'd much rather keep to the original form-factor and then contain the form Elements to their own components and pepper in the types if possible. Thanks to @iamgengar. and his comment on the PR. I'm able to get a form component and the type for name works (in vscode): https://stackblitz.com/edit/tanstack-form-bzeh5h8y

rising-crimson•9mo ago

rising-crimson•9mo ago

What are the current thoughts from the team. Will an approach wrapping Form be first party or will you want the "community" to take over? Thanks

other-emerald•9mo ago

Form is meant to be a headless library, it gives the core logic and the building blocks so that anyone can build their own custom logic and UI on top. At this stage we're happy to see how the community is using the library and open to discuss the possible approaches

manual-pinkOP•9mo ago

Can you try more complex examples? For example: <CommonFieldsForm> , <FormA> and <FormB> conditionally rendered by the selection of a dropdown

rising-crimson•9mo ago

I don't think this will have any problems with conditional fields. But when it comes to forms being conditionally rendered. I'm waiting for FormGroups before I try that use case.

manual-pinkOP•9mo ago

Do you have a link to the GitHub discussion or any link about that feature and the status?

manual-pinkOP•9mo ago

https://github.com/TanStack/form/issues/419

GitHub

[Feature Request]: Form Groups · Issue #419 · TanStack/form

Description When building a form stepper, like so: It's common for each step to have its own form. However, this complicates the form submission and validation process by requiring you to add c...

manual-pinkOP•9mo ago

This is definitely what I need. Would be a huge boost for tanstack form for complex cases

fascinating-indigo•9mo ago

How did you @El Barto solve this (or did you)? I'm building forms with Tanstack Form, but it feels a bit clunky to not be able to wrap simple repeating code blocks to a common component (e.g. TextInputField). At least my skills aren't enough to survive in the typing jungle to create such a component.

extended-yellow•9mo ago

it feels a bit clunky to not be able to wrap simple repeating code blocks to a common component (e.g. TextInputField)

It's absolutely possible. We'll have more docs on this soon, but it's how I'm using TS Form in my projects

fascinating-indigo•9mo ago

Super! I'll be waiting for the docs like a maniac! 😜

subsequent-cyan•9mo ago

@El Barto we have a 100+ field form broken up into about 5 chunks. We've handled it as separate components, passing down the form to each (form = {form}) and it works really well so far. The main problem we are facing is conditionally validating with zod, but I don't think that's on tanstack to solve.

fascinating-indigo•9mo ago

@Simon how do you handle the typing when passing the form down to components? I mean, that's my problem at least. I don't understand how to define the types to make it passable. Do you have any simple example how you do it?

adverse-sapphire•9mo ago

I might be wrong, so constructive comments are appreciated but this is what I'm doing.

import TextField from '@mui/material/TextField';

import { DeepKeys, DeepValue, useForm } from '@tanstack/react-form';

type InferValidFields<TForm, TFieldType> = {
  [K in DeepKeys<TForm>]: DeepValue<TForm, K> extends TFieldType ? K : never;
}[DeepKeys<TForm>];

export default function GenericTextField3<TForm, TName extends InferValidFields<TForm, string>>({
  name,
  form: { Field },
}: {
  name: TName;
  form: ReturnType<typeof useForm<TForm, any>>;
}): JSX.Element {
  return (
    <Field name={name}>
      {({ handleChange, handleBlur, state }) => (
        <TextField
          name={String(name)}
          onChange={(e) => {
            handleChange(e.target.value as any);
          }}
          onBlur={handleBlur}
          value={state.value}
        />
      )}
    </Field>
  );
}

import TextField from '@mui/material/TextField';

import { DeepKeys, DeepValue, useForm } from '@tanstack/react-form';

type InferValidFields<TForm, TFieldType> = {
  [K in DeepKeys<TForm>]: DeepValue<TForm, K> extends TFieldType ? K : never;
}[DeepKeys<TForm>];

export default function GenericTextField3<TForm, TName extends InferValidFields<TForm, string>>({
  name,
  form: { Field },
}: {
  name: TName;
  form: ReturnType<typeof useForm<TForm, any>>;
}): JSX.Element {
  return (
    <Field name={name}>
      {({ handleChange, handleBlur, state }) => (
        <TextField
          name={String(name)}
          onChange={(e) => {
            handleChange(e.target.value as any);
          }}
          onBlur={handleBlur}
          value={state.value}
        />
      )}
    </Field>
  );
}

This is kind of what I'm trying to do here https://discord.com/channels/719702312431386674/1319218935521869834, but haven't really had any interaction. What I've done is narrowed the name field of the generic component to only the type specified by your component, in this case "string" as its a text field... With the idea being you can specify other types, and then when you provide the form to the component it will only accept names that match those with fields that match the component. I'm still screwing around with it, but I'll come up with a better utility type that takes just the Form type and the desired component type, instead of the hard coded "string" type. [edit] updated the utility type

subsequent-cyan•9mo ago

Janne I'll DM you to avoid sidetracking this thread.

manual-pinkOP•9mo ago

What's the type you're assigning to your children components? could you ellaborate more? thanks. Using discriminated unions is not enough for your use case? That's how Im validating my form using discriminatedUnions + refine + superRefine

fascinating-indigo•9mo ago

You know, I'm not even close to wrapping my form fields into custom components. My main use-case would be just to wrap each of the fields to a custom component so that the parent component would stay cleaner and more readable. But currently I'm slamming all the form fields to the same tsx component. I've tried refactoring one of my fields into a separate component using PyCharm's extract method, but the function signature it creates is a beast with a lot of different kinds of Generic types that I can't import from anywhere etc. I'm after something like this: <MyEmailField form={form} /> or <MyEmailField field={field} /> so that the MyEmailField then recognizes the correct types, initialValues etc.

rising-crimson•9mo ago

Did you have a look at my example? https://discord.com/channels/719702312431386674/1317320907160686622/1318184506477248603 It's the former of what you are asking for. Why would the component recognise initialValues, shouldn't the validators take care of that? What's your use case?

genetic-orange•9mo ago

I agree, feel free to give a like on my github comment 😉

Gaming

Programming

Any ideas for this use case?

Did you find this page helpful?