Feature Request: Allow multiple Submit Actions / Validation Conditions about final-form

[xiety]

I want to make three submit buttons: "Save", "Save and return to list", "Save and create next". Is there some way to provide additional information to submit handler?

[erikras]

Ooh, BEFORE the validation.. yes, that makes sense...

[erikras]

Your other option would be to set the value in the form.

<button onClick={() => {
  form.change('pill', 'red') // triggers sync validation
  form.submit() // will not submit if has sync errors
}}>Take the red pill</button>

[harunsmrkovic]

Are there any updates on this? I want to do the same thing as @xiety

[hewenguang]

any update ???

[erikras]

Interesting idea. My most popular StackOverflow answer is about this specific use case.

I like the .with() syntax you propose.

[kromit]

I saw you StackOverflow answer but it does not cover different validation. It adds additional values after the validation. I want the values injected before the validation so it can be processed by the validate function.

[kromit]

you are fixing things faster than i can comment... please reopen

[erikras]

Okay, so doing it before validation is extremely complicated and actually doesn't make sense. Sync validation doesn't run when the form is submitted, it runs when the form values change.

You can still do your checks, but with synchronous client-side submit validation. Your best solution is going to be something like this:

onSubmit = values => {
  if (values.pill === 'red') {
    // let's say this means firstName is required
    if (!values.firstName) {
      return { firstName: 'First name is required if you want to take the red pill' }
    }
  } else if (values.pill === 'blue') {
    // let's say this means lastName is required
    if (!values.lastName) {
      return { lastName: 'Last name is required if you want to take the blue pill' }
    }
  }
  return ajax.send(values)
}

...

form.submit({ pill: 'red' })

Make sense?

[kromit]

Yeah. That's why I've created the issue :) Those options are all valid but equally hacky.

There is no clear approach to do this. What I would like to trigger the sync validation one additional time when

form.submit.with({pill:'red'})()
// or
form.submit.withChange({pill:'red'})()

is called.
One could ague that adding {pill:'red'} before the submit is actually a change event so the validation is triggered again.

[santaclauze]

We have a similar case where we have 2 of the buttons listed by @xiety

[manoelneto]

Hey guys, sharing the way I solved it.

// fist I defined a ref to set the action I want to trigger later
const actionRef = useRef<string>("")


const onSubmit = async (v: FormValues) => {
  // default submit code ...

  if (actionRef.current === "send_quote") {
    // Now I can trigger my send_quote action
  } else {
    // Now I can trigger my default action
    alert.success("Quote saved successfully")
  }
}

<Form
  initialValues={initialValues}
  onSubmit={onSubmit}
>
  {({ handleSubmit, submitting }) => (
    <form
      onSubmit={e => {
        // sets the action as the main here
        actionRef.current = "main"
        handleSubmit(e)
      }}
    >
      ... fields here

      <button
        // note, this is a submit type button
        type="submit"
        // check here is the action is main, so we can set is-loading class to this button
        className={`button ml-2 is-primary ${submitting &&
          actionRef.current === "main" &&
          "is-loading"}`}
      >
        <span className="icon">
          <i className="fas fa-save" />
        </span>
        <span>Save Quote</span>
      </button>

      <button
        // note, this is a normal type button
        type="button"
        // check here is the action is "send_quote", so we can set is-loading class to this button
        className={`button ml-2 is-primary ${submitting &&
          actionRef.current === "send_quote" &&
          "is-loading"}`}
        // call by myself the handleSubmit action
        onClick={() => {
          actionRef.current = "send_quote"
          handleSubmit()
        }}
      >
    </form>
</Form>

[AlekseyMalakhov]

I have not checked but does event.submitter.name or event.nativeEvent.submitter.name work? Just add to your buttons different name and check

[isti115]

@AlekseyMalakhov That does sounds like a reasonable idea, but how does one get access to the event in the onSubmit callback? 🤔 I don't see it mentioned anywhere:
https://final-form.org/docs/final-form/types/Config#onsubmit