Save whole state of form

[Perevezentsev Pavel]

Are you submitting a bug report or a feature request?

feature request

What is the current behavior?

Now the Final Form takes only initial values, but sometimes require to store all state of form (like pristine of fields and other meta information). It's useful if u build realtime application. When the user reloads the page, we must show the user the state of the form from the previous save. Therefore, I propose to supplement the api form to restore the entire state of the form.

const form = createForm({
  initialValues: {
   fieldOneName: {
     input: {
       value: 'some value',
     },
     meta: {
       dirty: true,
     }
   }
  },
  onSubmit,
})

What is the expected behavior?

Sandbox Link

What's your environment?

Other information

[Erik Rasmussen]

It might be nice to give FormApi a serialize/deserialize api.

[Perevezentsev Pavel]

I thought this feature should look like this:

const formState = await fetchFormStateByIdFromAPI(formId);

const form = createForm(formState);

const unsubscribe = form.subscribe(
  formState => {
    updateFormStateOnAPI(formId, formState);
  },
  {
    dirty: true,
    valid: true,
    values: true
  }
)

const unregisterField = form.registerField(
  'username',
  fieldState => {},
  {
    active: true,
    dirty: true,
    touched: true,
    valid: true,
    value: true
  }
)

form.submit() 

and usage with react

const useFormStateQuery = () => {
  const { formId } = useParams();
  const [loading, setLoading] = React.useState(true);
  const [formState, setFormState] = React.useState();

  React.useEffect(() => {
    fetchFormStateByIdFromAPI(formId).then(formState => {
      setFormState(formState);
      setLoading(false);
    });
  }, [formId]);

  return { loading, formState };
};

const MyForm = () => {
  const { loading, formState } = useFormStateQuery();

  React.useEffect(() => {
    form.subscribe(formState => {
      updateFormStateOnAPI(formId, formState);
    });
  }, []);

  if (loading) {
    return 'Loading...';
  }

  const form = React.useMemo(() => createForm(formState), [formState]);

  return (
    <Form
      form={form}
      subscription={{ values: true }}
      render={({ handleSubmit, submitting, pristine }) => (
        <form onSubmit={handleSubmit}>
          <Field
            name="username"
            component="input"
            type="text"
            placeholder="Username"
          />
          <button type="submit" disabled={submitting || pristine}>
            Submit
          </button>
        </form>
      )}
    />
  );
};

You apparently have a different vision, could you tell us more about it?

[Joel]

I have a case for this with ReactNative.

I would like users to be able to navigate away from a partially-filled form entry view and later return to the view with the form in it's previous partially-filled state.

I would want dirty state to be preserved but not sure what should happen with things like touched though - should these fields be touched when user returns?

[Nicholas Hogg]

Was there ever any progress on this?