question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Auto-saving forms

See original GitHub issue

Hi @jaredpalmer! I was looking to migrate my forms to a simpler library and wondering if the Formik’s API would support auto-saving forms. I went through the README, but wasn’t sure if it would be possible (Apologies if I missed something!)

Usecase: Creating an auto-saving form, where values are saved as the user enters them. This, in most cases, will imply that the changes are saved (and/or validated server-side) onChange, though probably debounced. In some cases, onBlur can work but it is not always the optimum user-experience (for example, choosing a username).

Users might choose to submit in one of two manners - submit the entire form, or submit just that field. This is likely to happen when it is a heavier or a longer form.

So, the two features needed would be -

  1. Submit on change or blur.
  2. Submit that individual field rather than the entire form.

Thank you!

PS. FWIW, I hacked together a solution currently using Redux-Form and React-Debounce-Input that can be found here - http://gist.github.com/oyeanuj/2f69ebe1004e2ff47d7550d957bf05cf with the basic overview in the file TheAutoSavingForm.md in that gist.

Issue Analytics

  • State:closed
  • Created 6 years ago
  • Reactions:4
  • Comments:15 (4 by maintainers)

github_iconTop GitHub Comments

23reactions
jaredpalmercommented, Oct 3, 2017

The goal of my example to show the pattern you might use to handle pretty much kind of extended Formik behavior. Much like React Router 4, Formik is just a React component. This means that the problems you run into can usually be solved with just React and don’t require expanding the API. That being said, if there is a community need, I’d probably codify and bless a solution by creating formik-autosave

8reactions
shamilovtimcommented, Nov 15, 2019

Seeing as how in 2019 this is now how the majority of mobile forms work my opinion is that this should be a mainline option presented by the plugin itself. I know that this plugin isn’t explicitly for react-native but not having this feature somewhat excludes react native from working well with this plugin. Just my two cents here. I wouldn’t mind adding a PR to react-native-formik to address the lack of this feature.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Autosave your response progress on a Google Form
When you fill out a Google Form in your Google account, your progress is automatically saved as a draft for 30 days. This...
Read more >
How to make the most of the Google Forms autosave feature
Autosave allows people to enter data into a Google Form over multiple sessions, but there also may be times when you may want...
Read more >
Google Forms - How to enable/disable autosave - Iorad
When you fill out a Google Form in your Google account, your progress is automatically saved as a draft for 30 days. This...
Read more >
Your progress is automatically saved as you respond to forms ...
When responding to a Google Form, Quiz, or Quiz assignment in Classroom ... Restrictions and select “Disable autosave for all respondents”.
Read more >
The Ultimate Guide to Creating Auto-Saving Forms in Angular
The following commands create a new Angular app, generate the component where the auto-saving form will live, serve the app, and open the...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found