Detecting if form has been "touched" outside of specific fields or onSubmit?

[nico-martinucci]

I'm rendering a form inside of a modal, which has an onClose prop. If the form hasn't been "touched", then I want the modal to close immediately when onClose is fired; otherwise, I want to divert to a confirmation box before closing. This requires knowing at the parent component level whether or not the form has been "touched".

I have found the isPristine and isTouched properties on the object returned from useForm, but these don't appear to update as the form is being filled out, just when the form's onSubmit is called. Is there something I'm missing? Some way I can force an update of these values or something else that's exposed that I'm missing? Or am I stuck managing my own "touched" state outside of the form that tracks whether an input has been touched?

Here's a very basic pseudo-code example:

const ModalFormComponent = () => {
  const { Field, Subscribe, handleSubmit, state } = useForm({
    // normal set-up with default values and defined onSubmit
  })

  // "state" here has `isPristine` and `isTouched` properties, but these appear
  // to be determined at render and not updated as the form is updated

  return (
    <Modal
      // Here is where I want to determine and pass whether the form has been touched,
	  // so the modal can determine whether to just close or display the confirmation popup
    >
      <Field>
        {({state}) => (
          // `state.meta.isPristine` will update here as the field is modified
        )}
      </Field>
      ...
      <Subscribe selector={state => [state.isPristine]}>
        {([isPristine]) => (
          // `isPristine` will reflect current pristine state of the form on submit
        )}
      </Subscribe>
    </Modal>)
}

Thanks in advance!

[sbruinsje]

I am currently determining if i can use this library for my usecase and one of the requirements is this. Any answer for this?

[nico-martinucci]

I am currently determining if i can use this library for my usecase and one of the requirements is this. Any answer for this?

I ended up rolling my own hook to solve this:

import { useEffect, useState } from 'react'
import { FormState } from '@tanstack/react-form'
import { Store } from '@tanstack/store'

export const useIsFormUnchanged = <T>(
  store: Store<FormState<T>>,
  defaultValues: Record<string, any>,
) => {
  const [isEmpty, setIsEmpty] = useState<boolean>(true)

  useEffect(() => {
    return store.subscribe(() => {
      if (store.state.isPristine !== isEmpty) {
        setIsEmpty(store.state.isPristine)
      }

      if (JSON.stringify(store.state.values) === JSON.stringify(defaultValues)) {
        setIsEmpty(true)
      }
    })
  }, [store])

  return isEmpty
}

Use it like:

const CustomFormComponent = () => {
	const defaultValues = {
		...
	}

	const { Field, Subscribe, handleSubmit, store } = useForm({
		defaultValues,
		onSubmit: ...
	})

	// value here will update as the form values change
	const isFormUnchanged = useIsFormUnchanged<typeof defaultValues>(store, defaultValues)

	return (
		...
	)
}

This hook has the added benefit of also checking if the form has returned to its default state (something isPristine does not do)

[sbruinsje]

That looks pretty nice I might go for this solution if I opt for this library in the end

I do wish this kind of stuff was included in form libraries by default though. In single page applications its very common that you need meta state or the form values outside of the form library component itself. For instance to disable the save button located elsewhere when the form is not dirty.

[nico-martinucci]

Totally agree, though to be fair there isn't even a v 1 of this library yet. So maybe this will be coming in the future.

[CanRau]

I adapted @nico-martinucci's hook to work with newer versions type-wise (tested with v1.6.3).

import type { FormState, FormValidateOrFn, FormAsyncValidateOrFn } from "@tanstack/react-form";
import type { Derived } from "@tanstack/store";
import { useEffect, useState } from "react";

export function useIsFormUnchanged<TFormData>(
	store: Derived<
		FormState<
			TFormData,
			FormValidateOrFn<TFormData> | undefined,
			FormValidateOrFn<TFormData> | undefined,
			FormAsyncValidateOrFn<TFormData> | undefined,
			FormValidateOrFn<TFormData> | undefined,
			FormAsyncValidateOrFn<TFormData> | undefined,
			FormValidateOrFn<TFormData> | undefined,
			FormAsyncValidateOrFn<TFormData> | undefined,
			FormAsyncValidateOrFn<TFormData> | undefined
		>
	>,
	defaultValues: Record<string, any>,
) {
	const [isEmpty, setIsEmpty] = useState<boolean>(true);

	useEffect(() => {
		return store.subscribe(() => {
			if (store.state.isPristine !== isEmpty) {
				setIsEmpty(store.state.isPristine);
			}

			if (JSON.stringify(store.state.values) === JSON.stringify(defaultValues)) {
				setIsEmpty(true);
			}
		});
	}, [store]);

	return isEmpty;
}

usage:

function CustomFormComponent() {
	const defaultValues = {
		foo: "bar"
	}

	const form = useForm({
		defaultValues,
		onSubmit: ({ value, meta }) => {
			console.log({ value, meta });
		}
	})

	// no need to manually pass in the generic `TFormData`
	// it gets inferred from the store passed in as first argument
	const isFormUnchanged = useIsFormUnchanged(form.store, defaultValues)

	return (
		<form>{/* ... */}</form>
	)
}