Comments (7)
@jLouzado It depends on what you define as "successful". If onSubmit
is called, it means the form passed validation and what submitted. So clearing the form in onSubmit
or postSubmit
would work if all you need to know is that validation passed and the submit button was pushed.
I am assuming however, that you are sending your form data to a server or service for processing, and upon receiving a "successful response", you want to clear the form. If that is the case, I would just use the instance provided in lifecycle methods (or a reference to the form instance in whatever function you are using to make the api call). For example:
// success callbacks within form lifecycle methods
class MyComponent extends React.component {
render () {
return (
<Form
onSubmit={(values, state, props, instance) => { // instance is provided with every lifecycle method
// synchronous success
if (formWasSuccessful) {
instance.resetForm()
}
// asynchronous success with promise
funcThatReturnsAPromise(values).then(res => {
instance.resetForm()
})
}}
>
...
</Form>
)
}
}
// asynchronous success outside of form lifecycle method
class MyComponent extends React.component {
render () {
return (
<Form
ref={instance => { this.form = instance }}
onSubmit={(values, state, props, instance) => {
// asynchronous success with promise
this.sendToServer(values)
}}
>
...
</Form>
)
},
sendToServer (values) {
funcThatReturnsAPromise(values)
.then((res) => {
this.form.resetForm()
})
}
}
from form.
@tannerlinsley Yes you're right! Basically I was inserting the values
document into a collection and was waiting on the response callback to clear the form if insertion was successful.
I'll try this out and get back to you. In the meantime should I create a PR to update the documentation? This seems like it's a core use-case.
@SeeThruHead thank you for your help as well. 😃
from form.
<Form
onSubmit={(values) => {
/*Do Something*/
if(/*success*/) {
//Here's where I want to clear the form.
}
})}
>
{({submitForm, resetForm}) => {
return(
<form onSubmit={() => { submitForm(); resetForm(); }>
<Text className="" placeholder="Title" field="title" required/>
<button type='submit'>Create Box</button>
<button onClick={resetForm}>
Reset
</button>
</form>
);
}}
</Form>
any reason this would not work?
from form.
@SeeThruHead it would, but I was trying to do it conditionally only on successful submit.
For a longer form you wouldn't want people to have to retype an entire form if there was an error right?
from form.
yes i get what you're saying now.
what you want is to call resetForm() from inside postSubmit
or have submit return a promise so you can then on it
(future api considerations)
there might be a way to do this with the current api, @tannerlinsley would know.
from form.
from form.
Finally got a chance to implement this in my project... was busy with other features till now.
I get that this example works with Promises, but does it work with normal callback functions as well? My guess is not, correct? @tannerlinsley @SeeThruHead
from form.
Related Issues (20)
- Add a way to display only one error for a field HOT 14
- Calling `createFormFactory<FormData>` and using a validator adapter throw TS errors HOT 1
- onChangeAsyncDebounceMs not properly debouncing HOT 1
- TanStack/Angular - Error when resetting the form HOT 1
- Missing error when validating via form options instead of via field HOT 3
- Factory `onSubmit` function not invoked whenever factory.useForm gets provided with `onSubmit` itself HOT 2
- Unable to read properties in nested array table HOT 2
- Nested Values Disappear when using StrictMode HOT 5
- onMount Error is not revalidated when the user changes the input HOT 2
- server actions example errors when using zod adapter HOT 1
- Cannot infer types on arrays of union of objects HOT 2
- Moving subfields of array field mix their values HOT 5
- Bad performance with 100+ rows in an array field HOT 4
- insertFieldValue replaces item instead of adding a new one and shift existing items
- solid form createField failed to import `memo` from "solid-js/web" when used in solid-start ssr mode HOT 2
- Issue with array + react + numbers HOT 2
- Nested Values Disappear when using StrictMode and `pushValue` HOT 11
- Incorrect field.state.value type HOT 5
- Server Actions example leaks backend code HOT 8
- Example for array usage lacks mode="array" HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from form.