T
TanStack•2mo ago
afraid-scarlet

Reactive form.Subscribe to multiple form values

Hi, I have a nested form with fields like this: translations.<"draft" | "published">.<"en" | "ja">.title And I want to be able to switch between the translations' draft/published and locales with switches, so I did this: 
// ... 
<form.Subscribe
          selector={(state) => [state.values.status, state.values.locale]}
        >
          {([status, locale]) => (
            <>
              <form.AppField name={`translations.${status}.${locale}.title`}>
                {(field) => {
                  return <field.TextField label="Title" />;
                }}
              </form.AppField>
            </>
          )}
</form.Subscribe>
// ... 
<form.Subscribe
          selector={(state) => [state.values.status, state.values.locale]}
        >
          {([status, locale]) => (
            <>
              <form.AppField name={`translations.${status}.${locale}.title`}>
                {(field) => {
                  return <field.TextField label="Title" />;
                }}
              </form.AppField>
            </>
          )}
</form.Subscribe>
as I have seen in the docs here. But then type of both, status and locale 's types are resolving to union of all types, i.e. as "draft" | "published" | "en" | "ja" ... is that expected behavior?
Basic Concepts and Terminology | TanStack Form React Docs
Field statesThis page introduces the basic concepts and terminology used in the @tanstack/react-form library. Familiarizing yourself with these concepts will help you better understand and work with the library....
2 Replies
afraid-scarlet
afraid-scarletOP•2mo ago
Or we are supposed to use nested <form.Subscribe > for that? Or is it ok to use objects, not arrays for that? selector={(state) => ({status: state.values.status, locale: state.values.locale})}
xenial-black
xenial-black•2mo ago
use as const to indicate that it‘s a tuple otherwise typescript infers it‘s a simple array

Did you find this page helpful?