docs(core): reusable fields & reusable field utility type

[harry-whorlow]

A continue on from #636, this PR introduces docs for reusable components/fields as well as introduces a Ts utility type for inferring valid field names, for the relevant component.

Much like my last PR this is something I was trying to do for a work project, but not having any docs or examples hindered the process, so I figured I'd give it a go.

---

Guidance wanted:

Specifically with this line onChange={(e) => handleChange(e.target.value as any)} (line 28 in reusable-fields) I can't stand the casting of any, however I can figure a way for Ts to infer this value. Any suggestions is greatly appreciated!

---

Sandbox

I have a code sandbox for playing around with this here, you'll see theres a folder called solutions that has two files:

• one.tsx works and is a refined version of all my test components
• two.tsx is another version that I haven't quite got working but in terms of user Ux I think is an improvement.

The rest of the files can be ignored but if you want to see how I got here they kind of explain my reasoning.

[nx-cloud]

View your CI Pipeline Execution ↗ for commit f0df804.

Command	Status	Duration	Result
nx affected --targets=test:sherif,test:knip,tes...	❌ Failed	2m 18s	View ↗
nx run-many --target=build --exclude=examples/**	✅ Succeeded	29s	View ↗

---

☁️ Nx Cloud last updated this comment at 2025-01-06 07:54:10 UTC

[pkg-pr-new]

Open in Stackblitz

More templates

• @tanstack/form-example-angular-array
• @tanstack/form-example-angular-simple
• @tanstack/form-example-angular-valibot
• @tanstack/form-example-angular-yup
• @tanstack/form-example-angular-zod
• @tanstack/form-example-lit-simple
• @tanstack/form-example-lit-ui-libraries
• @tanstack/form-example-react-array
• @tanstack/form-example-react-compiler
• @tanstack/field-errors-from-form-validators
• @tanstack/form-example-react-next-server-actions
• @tanstack/form-example-react-query-integration
• @tanstack/form-example-remix
• @tanstack/form-example-react-simple
• @tanstack/form-example-react-standard-schema
• @tanstack/form-example-react-tanstack-start
• @tanstack/form-example-react-ui-libraries
• @tanstack/form-example-react-valibot
• @tanstack/form-example-react-yup
• @tanstack/form-example-react-zod
• @tanstack/form-example-solid-array
• @tanstack/form-example-solid-simple
• @tanstack/form-example-solid-valibot
• @tanstack/form-example-solid-yup
• @tanstack/form-example-solid-zod
• @tanstack/form-example-vue-array
• @tanstack/form-example-vue-simple
• @tanstack/form-example-vue-valibot
• @tanstack/form-example-vue-yup
• @tanstack/form-example-vue-zod

@tanstack/angular-form

npm i https://pkg.pr.new/@tanstack/angular-form@1084

@tanstack/form-core

npm i https://pkg.pr.new/@tanstack/form-core@1084

@tanstack/react-form

npm i https://pkg.pr.new/@tanstack/react-form@1084

@tanstack/lit-form

npm i https://pkg.pr.new/@tanstack/lit-form@1084

@tanstack/solid-form

npm i https://pkg.pr.new/@tanstack/solid-form@1084

@tanstack/valibot-form-adapter

npm i https://pkg.pr.new/@tanstack/valibot-form-adapter@1084

@tanstack/vue-form

npm i https://pkg.pr.new/@tanstack/vue-form@1084

@tanstack/yup-form-adapter

npm i https://pkg.pr.new/@tanstack/yup-form-adapter@1084

@tanstack/zod-form-adapter

npm i https://pkg.pr.new/@tanstack/zod-form-adapter@1084

commit: f0df804

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 86.75%. Comparing base (91eb9ab) to head (f283513).
Report is 4 commits behind head on main.

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #1084      +/-   ##
==========================================
+ Coverage   86.61%   86.75%   +0.13%     
==========================================
  Files          29       29              
  Lines        1158     1155       -3     
  Branches      301      298       -3     
==========================================
- Hits         1003     1002       -1     
+ Misses        142      140       -2     
  Partials       13       13              

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[harry-whorlow]

Sorry for the push forces... was looking at the incorrect section of code and wondering why it wasn't changing. Friday’s for you 🙃

[harry-whorlow]

I would love to get rid of the TFormValidator slot, since TFormValidator is just Validator<TForm, unknown> | undefined. But so far my efforts have been fruitless.

[harry-whorlow]

Another improvement would be to get Ts to infer the handleChange value so the update is type safe.

[Talent30]

Might be a dup with #825 ?

[harry-whorlow]

@Talent30 yeah, I was talking with crutchcorn about this on Friday and he made me aware of it. He said to leave it open for now, and he'll link it to his issue. Though, I'm not sure how useful it'll be, as after reading though the linked Pr, they've run into all the same problems I have. 🙃

[bzbetty]

wonder if it'd be possible to do something like form.Field as a way to provide your components.

   function useMyForm(args) {
       const form = useForm(args);
       return {
          ...form
         TextField: function ({ name }) {
              return (
                  <form.Field name={name}>
                        {({ handleChange, handleBlur, state }) => (
                          <input
                            value={state.value}
                            onChange={(e) => handleChange(e.target.value as any)}
                            onBlur={handleBlur}
                          />
                        )}
                  </form.Field>
              );
          }
       }
   }

then to use it it's just like form.Field

  const form = useMyForm(args);

  <form.TextField name="blah" />
...

[harry-whorlow]

@bzbetty I think the issue with the proposed solution is that if the form is apart of the component then your re-instantiating the form on every component. So instead of having one form controlling the fields, you will have multiple standalone forms controlling a single field then passing the data back to whatever the args is.

After seeing the proposed solutions in #825, and after banging my head against the keyboard for a couple weeks, I think its probably the best way to go. Though I will admit if you could get the form typing your solution would probably address the internal typing issues I ran into in my attempt.

[crutchcorn]

Closing in favor of an alternative API we're proposing here: #1179