How to correctly handle related/ linked/ dependent or conditional fields?

[Mushroomator]

In my form I have a checkbox which when checked copies over a value from an input field to another textarea and disables this textarea. Alternatively, if the checkbox is not checked I want the user to be able to fill in all those form fields on his own. So basically I have form fields which have dependencies to each other and I need to set other form fields in the onChange callback of a form field.

I haven't really found any documentation on this but after some fiddling around I found some solutions, some of which are obviously hacks but one seems to be a reasonable way to do things. This way involves <form.Subscribe />. It still seems a bit verbose though, so I am wondering whether there is a better solution or whether that's exactly <form.Subscribe /> was intended to do?

Sample using <form.Subscribe />

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

type Commit = {
  title: string;
  useTitleAsDescription: boolean;
  description: string;
};

const formFactory = createFormFactory<Commit>({
  defaultValues: {
    title: "Add TanStack Form",
    useTitleAsDescription: false,
    description: "",
  },
});

function App() {
  const form = formFactory.useForm({
    onSubmit: ({ value }) => {
      console.log(value.title);
    },
  });

  return (
    <form.Provider>
      <form
        style={{ display: "flex", flexDirection: "column", maxWidth: 300 }}
        onSubmit={(e) => {
          e.preventDefault();
          e.stopPropagation();
          void form.handleSubmit();
        }}
      >
        <form.Field name="title">
          {(field) => (
            <>
              <label htmlFor={field.name}>Title</label>
              <input
                id={field.name}
                value={field.state.value}
                onChange={(e) => field.handleChange(e.target.value)}
              />
            </>
          )}
        </form.Field>
        <form.Field name="useTitleAsDescription">
          {(field) => (
            <div style={{ display: "flex" }}>
              <input
                type="checkbox"
                id={field.name}
                checked={field.state.value}
                onChange={(e) => {
                  const checked = e.target.checked;
                  const title = field.form.getFieldValue("title");
                  const description = field.form.getFieldValue("description");
                  if (checked && description !== title) {
                    // Update another field's value
                    form.setFieldValue("description", title, { touch: true });
                  }
                  // update this field
                  field.handleChange(checked);
                }}
              />
              <label htmlFor={field.name}>Use title as description</label>
            </div>
          )}
        </form.Field>
        <form.Field name="description">
          {(field) => (
            // Subscribe to state changes of another field
            <form.Subscribe
              selector={(state) => [state.values.useTitleAsDescription]} // Subscribe to another field's state
            >
              {([useTitleAsDescription]) => (
                <>
                  <label htmlFor={field.name}>Description</label>
                  <textarea
                    readOnly={useTitleAsDescription}
                    disabled={useTitleAsDescription}
                    id={field.name}
                    value={field.state.value}
                    onChange={(e) => field.handleChange(e.target.value)}
                  />
                </>
              )}
            </form.Subscribe>
          )}
        </form.Field>
      </form>
    </form.Provider>
  );
}

export default App;

Output

PS

Without using <form.Subscribe> dependent fields never re-render. Another - obviously hacky - solution, which also seems to work though, is to use field.form.getFieldInfo("description").instance?.handleChange("newValue"); to trigger handleChange() of the dependent property which let's it re-render.

[crutchcorn]

This is now an official feature here:

https://tanstack.com/form/latest/docs/framework/react/guides/linked-fields

[TruDan]

This doc implies that the dependency/linked field is only for validation. but what if for example another field is required as a prop for a later field? I don't know if this will always cause a re-render when the dependent field changes or only if the validation result changes. but in our case we want the linked field to re-render when the dependent field changes.

Perhaps something like the selector for the form.Subscribe would be nice as further parameters in the {(field) => ...} fn?

[KGSands]

Also I'm curious how to conditionally render fields based on the value of other fields e.g. say you had a toggle, and switching the toggle on makes other fields appear.

Edit: Nevermind I followed https://tanstack.com/form/latest/docs/framework/react/guides/basic-concepts#reactivity