Basic concepts

Flow

Learn how we can save the form state to use it later on.

Flow

We can get the current state of the form by using the getFlow function. This function can be accessed as a variable when we reference the components in the schema, or by using the useFormity hook.

// ...
import {
  DefaultValues,
  Resolver,
  OnNext,
  Variables,
  useFormity,
} from "formity";

// ...

export default function Form({
  defaultValues,
  resolver,
  onNext,
  children,
}: FormProps) {
  const form = useForm({ defaultValues, resolver });
  const { getFlow } = useFormity();

  // ...

  return (
    <form onSubmit={form.handleSubmit(handleSubmit)} className="h-full">
      <FormProvider {...form}>{children}</FormProvider>
    </form>
  );
}

In this function, we need to pass the current values of the form, and it will return an object of type Flow. This object contains all the data about the flow of steps that have been completed with the values that have been entered.

// ...

export default function Form({
  defaultValues,
  resolver,
  onNext,
  children,
}: FormProps) {
  const form = useForm({ defaultValues, resolver });
  const { getFlow } = useFormity();

  useEffect(() => {
    const flow = getFlow(form.getValues());
    console.log(flow);
  }, [form, getFlow]);

  // ...

  return (
    <form onSubmit={form.handleSubmit(handleSubmit)} className="h-full">
      <FormProvider {...form}>{children}</FormProvider>
    </form>
  );
}

We can save this object anywhere and use it to resume the form from where we left off.

// ...

useEffect(() => {
  const flow = getFlow(form.getValues());
  saveFlow(flow);
}, [form, getFlow]);

// ...

To start the form using the state we saved, we can use the initialFlow prop of the Formity component:

// ...

const initialFlow = getSavedFlow();

export default function Home() {
  // ...

  return (
    <Formity
      components={components}
      schema={schema}
      onReturn={handleReturn}
      initialFlow={initialFlow}
    />
  );
}
Variables
Form