help: calling method from `onSubmit` prop about form

[tannerlinsley]

@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()
      })
  }
}

[jLouzado]

@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. 😃

[SeeThruHead]

<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?

[jLouzado]

@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?

[SeeThruHead]

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.

[tannerlinsley]

Yeah, we’d love a PR for some docs!

…

On Thu, Mar 23, 2017 at 1:55 PM Joel Louzado ***@***.***> wrote: @tannerlinsley <https://github.com/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 <https://github.com/SeeThruHead> thank you for your help as well. 😃 — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#52 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AFUmCdIA4t4j1czKcvgr3p0fPne1oanoks5ros5GgaJpZM4Mm45Q> .

[jLouzado]

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