How can i watch onChange on the form element?

[livevsonline]

Hi i am in a situation where i have to implement automatic search on form change, the onChange event has to call a custom function when an input is being changed, not necessarily re-rendering and calling the validation on each change, for instance i could have a setTimeout inside the custom function and clear that setTimeout on each change event until the user is finished inputting for x amount of time.

At first i tried to use a useEffect to capture touched fields like this:

	const {register, formState} = useFormContext();
	const [searchInterval, setSearchInterval] = useState<NodeJS.Timer>();

	useEffect(() => {
		clearInterval(searchInterval);

		setSearchInterval(setTimeout(() => {
			console.log('isDirty 1: ', formState.isDirty);
			console.log('touchedFields 2: ', formState.touchedFields);
			console.log('dirtyFields 3: ', formState.dirtyFields);
			console.log('defaultValues 4: ', formState.defaultValues);
		}, 750));
	}, [formState]);

This does trigger when a field is touched, however it does also trigger when the user stop focusing the input field as well as when the form is attempted to be submitted...

Then i tried to register the form element itself and i guess, bind an event, like so:

		<form
			{...register('form-it-is', {
				onChange: (e) => {
					alert('We are changing');
				},
			})}
		>
			{
				oProps.oFields.map((item, key) => {
					return (
						<Fragment key={key}>
							{item}
						</Fragment>
					);
				})
			}
		</form>

If i try to attach a onChange event directly on the form it is not fired upon change as i am expecting it to

What am i doing wrong, and how can i attach an onChange event on the form? :)

[bluebill1049]

you can just attach onChange on the form tag without reigster method.

[Moshyfawn]

Yep, that should do it

<form onChange={() => doAwesomeFormStuff()}>...</form>

[boonya]

You can subscribe to formState changes in a useEffect hook and run callback you need.

  const form = useForm<FormSchema>({
    defaultValues: normalizeInput(defaultValues),
  });

  const onSubmit = form.handleSubmit((values: FormSchema) => {
    return onConfirm?.(normalizeOutput(values));
  });

  useEffect(() => {
    return form.subscribe({
      formState: {
        values: true,
      },
      callback: ({values}) => {
        onChange?.(normalizeOutput(values));
      },
    });
  }, [form.subscribe]);