Pass external variable to onSubmit

Are you submitting a bug report or a feature request?

Feature request

What is the current behavior?

onSubmit only receives predefined arguments without an option to pass some custom data through handleSubmit() or form.submit()

What is the expected behavior?

It would be very useful if handleSubmit could accept more than one variable, and pass these variables to the onSubmit call.

Use case

Consider having a form with two actions: Save and Send to moderation

In both cases the form should first go through basic validation, then save the data, but if user has chosen to “Send to moderation”, we should make an additional validation check and require more fields, and if this validation passes - make one more api call.

It is currently possible to take the values from the form’s render props and make a custom callback. However, the only non-hacky way to throw submit errors is to return them from onSubmit. Therefore, unless we are able to pass some custom data, in this case - user’s action, we would not be able to achieve the desired behaviour without using some hacks like saving the action via the useRef before calling onSubmit.

[BATCOH]

Another approach is to use some field as container for your custom option:

const handleSubmit = async ({ action, ...values }, form) => {
  if (action === "delete") {
    ...
  } else {
    ...
  }
}
...
<Form onSubmit={handleSubmit}>
  {({
    form: {
      change,
    },
    submitting,
  }) => (
    <DeleteButton
      type="submit"
      onClick={() => change("action", "delete")}
      disabled={submitting}
    >
      Delete
    </DeleteButton>
    <Button
      type="submit"
      onClick={() => change("action", "save")}
      disabled={submitting}
      isLoading={submitting}
      label="Save"
    />
  )}
</Form>

Yep, its not about refs, but you can pass some flag and make condition inside submit based on its value.

[alfondotnet]

You can make the Send to moderation button type=button which will not submit the form, but call your custom function which will run submit and call whatever additional logic is needed.

Can you provide an example? I’m stuck on this also

I think Something like this should work

const sendToModeration = (values) => {}; 
const submitForm = (values) => {}; 

return <Form onSubmit={(values) => {
 // default submit code
submitForm(values);
}>
  {({ handleSubmit, form: { getState } }) => <form onSubmit={handleSubmit}>
  <input type="submit" />
  <input type="button" onClick={() => sendToModeration(getState().values}} />
</form>}
</Form>