how to get value from useForm on change input ?

[ahmerarain]

when value changes in input i want to get here instantly

const form = useForm({
defaultValues: {
name: user?.firstName + " " + user?.lastName || "",
},
onSubmit: async ({ value }) => {
console.log(value);
},
});

[heecheon92]

const form = useForm({
    defaultValues: {
        name: user?.firstName + " " + user?.lastName || "",
    },
    onSubmit: async ({ value }) => {
        console.log(value);
    },
     validators: {
        onChange: (form) => {
          console.log("test", form);
        },
    },
});

this might get you where you want but I think "onChange" is not meant to be used this way.

Your linter would cry.

[heecheon92]

interesting... but did you mean to say "field-level"?

[crutchcorn]

I didn't :) AFAIK we should have a listeners property on useForm. If not, let's mark this as a feature request under a real GH issue, not discussion

[alexy4744]

Hi @crutchcorn, are there plans to implement listeners on the form level? I'm assuming we can run side effects by adding a listener to each field, but this would obviously not scale with large forms.

[alexy4744]

Also I tried subscribing to the form.store but I faced the same issue where the subscription callback gets called multiple times, like this discussion here: #955

This is really the only thing that's preventing me from using @tanstack/react-form over react-hook-form. Otherwise, I really love the API that @tanstack/react-form offers, its much more ergonomic than any other react solutions out there.

[alexy4744]

I was able to do something like this:

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

type Person = {
  age: number;
  address: {
    city: string;
    street: string;
  }
};

const form = useForm({
  // ...
});

const createFieldListeners = <FieldName extends DeepKeys<Person>>(): FieldListeners<
  Person,
  FieldName
> => ({
  onChange: ({ fieldApi, value }) => {
    console.log(value);
  },
});

<form.Field children={...} listeners={createFieldListeners<"age">()} name="age" />

<form.Field children={...} listeners={createFieldListeners<"address.city">()} name="address.city" />

<form.Field children={...} listeners={createFieldListeners<"address.street">()} name="address.street" />

But if there's a better way to do it, let me know thanks!

[harry-whorlow]

@ahmerarain on the 25/11/24 field.listeners was added, along with the relevant docs.

So you can do

    <form.Field
        name="name"
        listeners={{
          onChange: ({ value }) => {
            console.log(value);
            // fieldApi is also available here so you can also access its utility functions
          },
        }}
      >
        {(field) => (
          <input
            value={field.state.value}
            onChange={(e) => field.handleChange(e.target.value)}
          />
        )}
      </form.Field>

With listeners you can also subscribe to the following events:

• onChange
• onBlur
• onMount
• onSubmit