Update the form state in react-final-form

0
votes

I want to set the form state to invalid based on my custom condition. I need to disable the submit button based on it.

I scanned the react-final-form docs but couldn't find a method for the same. Is there any way of doing it

1
react-final-formfinal-form

1 Answers

0
votes

I would look at any of the "synchronous validation" examples.

Edit 🏁 React Final Form - Synchronous Record-Level Validation Example

You can disable (gray out) the submit button by doing:

<Form onSubmit={onSubmit}>
  {({ handleSubmit, invalid }) => (
    <form onSubmit={handleSubmit}>
      ...fields here...
      <button type="submit" disabled={invalid}>Submit</button>
    </form>
  )}
</Form>

But I would recommend against it, as the attempt to submit an invalid form will mark all the fields as touched, which is a great way to only show the errors when the user has tried to submit the form.

If the form has validation errors, submission will be blocked by React Final Form.

Hope this helps!