Source:  Twitter logo

Current Behavior

<Formik
    isInitialValid
    initialValues={{ first_name: 'Test', email: 'test@mail.com' }}
    validate={validate}
    ref={node => (this.form = node)}
    onSubmitCallback={this.onSubmitCallback}
    render={formProps => {
        const fieldProps = { formProps, margin: 'normal', fullWidth: true, };
        const {values} = formProps;
        return (
            <Fragment>
                <form noValidate>
                    <TextField
                        {...fieldProps}
                        required
                        autoFocus
                        value={values.first_name}
                        type="text"
                        name="first_name"

                    />

                    <TextField
                        {...fieldProps}
                        name="last_name"
                        type="text"
                    />

                    <TextField
                        {...fieldProps}
                        required
                        name="email"
                        type="email"
                        value={values.email}

                    />
                </form>
                <Button onClick={this.onClick}>Login</Button>
            </Fragment>
        );
    }}
/>

I'm trying this solution https://github.com/jaredpalmer/formik/issues/73#issuecomment-317169770 but it always return me Uncaught TypeError: _this.props.onSubmit is not a function

When I tried to console.log(this.form) there is submitForm function.

Any solution guys?


- Formik Version: latest - React Version: v16 - OS: Mac OS

Just for anyone wondering what's the solution via React hooks :

Formik 2.x, as explained in this answer

// import this in the related component
import { useFormikContext } from 'formik';

// Then inside the component body
const { submitForm } = useFormikContext();

const handleSubmit = () => {
  submitForm();
}

Keep in mind that solution only works for components inside a Formik component as this uses the context API. If for some reason you'd like to manually submit from an external component, or from the component the Formik is actually used from, you can actually still use the innerRef prop.

TLDR ; This context answers works like a charm if the component that you're submitting from is a child of a <Formik> or withFormik() component, otherwise, use the innerRef answer below.

Formik 1.5.x+

// Attach this to your <Formik>
const formRef = useRef()

const handleSubmit = () => {
  if (formRef.current) {
    formRef.current.handleSubmit()
  }
}

// Render
<Formik innerRef={formRef} />
86 users liked answer #0dislike answer #086
Eric Martin profile pic
Eric Martin

You can bind formikProps.submitForm (Formik's programatic submit) to a parent component and then trigger submission from the parent:

import React from 'react';
import { Formik } from 'formik';

class MyForm extends React.Component {
    render() {
        const { bindSubmitForm } = this.props;
        return (
            <Formik
                initialValues={{ a: '' }}
                onSubmit={(values, { setSubmitting }) => {
                    console.log({ values });
                    setSubmitting(false);
                }}
            >
                {(formikProps) => {
                    const { values, handleChange, handleBlur, handleSubmit } = formikProps;

                    // bind the submission handler remotely
                    bindSubmitForm(formikProps.submitForm);

                    return (
                        <form noValidate onSubmit={handleSubmit}>
                            <input type="text" name="a" value={values.a} onChange={handleChange} onBlur={handleBlur} />
                        </form>
                    )
                }}
            </Formik>
        )
    }
}

class MyApp extends React.Component {

    // will hold access to formikProps.submitForm, to trigger form submission outside of the form
    submitMyForm = null;

    handleSubmitMyForm = (e) => {
        if (this.submitMyForm) {
            this.submitMyForm(e);
        }
    };
    bindSubmitForm = (submitForm) => {
        this.submitMyForm = submitForm;
    };
    render() {
        return (
            <div>
                <button onClick={this.handleSubmitMyForm}>Submit from outside</button>
                <MyForm bindSubmitForm={this.bindSubmitForm} />
            </div>
        )
    }
}

export default MyApp;
40 users liked answer #1dislike answer #140
Elise Chant profile pic
Elise Chant

The best solution I've found is described here https://stackoverflow.com/a/53573760

Copying the answer here:

Add "id" attribute to your form: id='my-form'

class CustomForm extends Component {
    render() {
        return (
             <form id='my-form' onSubmit={alert('Form submitted!')}>
                // Form Inputs go here    
             </form>
        );
    }
}

Then add the same Id to the "form" attribute of the target button outside of the form:

<button form='my-form' type="submit">Outside Button</button>

Now, the 'Outside Button' button will be absolutely equivalent as if it is inside the form.

Note: This is not supported by IE11.

15 users liked answer #2dislike answer #215
Yevhen profile pic
Yevhen

I just had the same issue and found a very easy solution for it hope this helps:

The issue can be solved with plain html. If you put an id tag on your form then you can target it with your button using the button's form tag.

example:

      <button type="submit" form="form1">
        Save
      </button>
      <form onSubmit={handleSubmit} id="form1">
           ....
      </form>

You can place the form and the button anywhere even separate.

This button will then trigger the forms submit functionality and formik will capture that continue the process as usual. (as long as the form is rendered on screen while the button is rendered then this will work no matter where the form and the button are located)

12 users liked answer #3dislike answer #312
Themis Papathemistocleous profile pic
Themis Papathemistocleous

If you convert your class component to a functional component, the custom hook useFormikContext provide a way to use submit anywhere down the tree:

   const { values, submitForm } = useFormikContext();

PS: this only for those who don't really need to call submit outside the Formik Component, so instead of using a ref you can put your Formik component at a higher level in the component tree, and use the custom hook useFormikContext, but if really need to submit from outside Formik you'll have to use a useRef .

<Formik innerRef={formikRef} />

https://formik.org/docs/api/useFormikContext

4 users liked answer #4dislike answer #44
ZEE profile pic
ZEE

In 2021, using 16.13.1, this way worked for me to satisfy several requirements:

  • The submit/reset buttons cannot be nested within the <Formik> element. Note, if you can do this then you should use the useFormikContext answer because it is simpler than mine. (Mine will allow you to change which form is being submitted (I have one app bar but multiple forms the user can navigate to).
  • The external submit/reset buttons must be able to submit and reset the Formik form.
  • The external submit/reset buttons must appear disabled until the form is dirty (the external component must be able to observe the Formik form's dirty state.)

Here's what I came up with: I created a new context provider dedicated to holding some helpful Formik stuff to link my two external components which are in different nested branches of the app (A global app bar and a form somewhere else, deeper in a page view – in fact, I need the submit/reset buttons to adapt to different forms the user has navigated to, not just one; not just one <Formik> element, but only one at a time).

The following examples use TypeScript but if you only know javascript just ignore the stuff after colons and it's the same in JS.

You place <FormContextProvider> high enough in your app that it wraps both of the disparate components that need to have access to Formik stuff. Simplified example:

<FormContextProvider>
  <MyAppBar />
  <MyPageWithAForm />
</FormContextProvider>

Here's FormContextProvider:

import React, { MutableRefObject, useRef, useState } from 'react'
import { FormikProps, FormikValues } from 'formik'

export interface ContextProps {
  formikFormRef: MutableRefObject<FormikProps<FormikValues>>
  forceUpdate: () => void
}

/**
 * Used to connect up buttons in the AppBar to a Formik form elsewhere in the app
 */
export const FormContext = React.createContext<Partial<ContextProps>>({})

// https://github.com/deeppatel234/react-context-devtool
FormContext.displayName = 'FormContext'

interface ProviderProps {}

export const FormContextProvider: React.FC<ProviderProps> = ({ children }) => {
  // Note, can't add specific TS form values to useRef here because the form will change from page to page.
  const formikFormRef = useRef<FormikProps<FormikValues>>(null)
  const [refresher, setRefresher] = useState<number>(0)

  const store: ContextProps = {
    formikFormRef,
    // workaround to allow components to observe the ref changes like formikFormRef.current.dirty
    forceUpdate: () => setRefresher(refresher + 1),
  }

  return <FormContext.Provider value={store}>{children}</FormContext.Provider>
}

In the component that renders the <Formik> element, I add this line:

const { formikFormRef } = useContext(FormContext)

In the same component, I add this attribute to the <Formik> element:

innerRef={formikFormRef}

In the same component, the first thing nested under the <Formik> element is this (importantly, note the addition of the <FormContextRefreshConduit /> line).

<Formik
  innerRef={formikFormRef}
  initialValues={initialValues}
  ...
>
  {({ submitForm, isSubmitting, initialValues, values, setErrors, errors, resetForm, dirty }) => (
    <Form>
      <FormContextRefreshConduit />
      ...

In my component that contains the submit/reset buttons, I have the following. Note the use of formikFormRef

export const MyAppBar: React.FC<Props> = ({}) => {
  const { formikFormRef } = useContext(FormContext)
  
  const dirty = formikFormRef.current?.dirty

  return (
    <>
      <AppButton
        onClick={formikFormRef.current?.resetForm}
        disabled={!dirty}
      >
        Revert
      </AppButton>
      <AppButton
        onClick={formikFormRef.current?.submitForm}
        disabled={!dirty}
      >
        Save
      </AppButton>
    </>
  )
}

The ref is useful for calling Formik methods but is not normally able to be observed for its dirty property (react won't trigger a re-render for this change). FormContextRefreshConduit together with forceUpdate are a viable workaround.

Thank you, I took inspiration from the other answers to find a way to meet all of my own requirements.

3 users liked answer #5dislike answer #53
ABCD.ca profile pic
ABCD.ca

If you're using withFormik, this worked for me:

  const handleSubmitThroughRef = () => {
    newFormRef.current.dispatchEvent(
      new Event("submit", { cancelable: true, bubbles: true })
    );
  };

Just put a regular react ref on your form:

  <form
        ref={newFormRef}
        
        onSubmit={handleSubmit}
      >
1 users liked answer #6dislike answer #61
Tony Jara profile pic
Tony Jara

found the culprit.

There are no longer onSubmitCallback on Formik props. Should change it to onSubmit

0 users liked answer #7dislike answer #70
ssuhat profile pic
ssuhat

You can try it

const submitForm = ({ values, setSubmitting }) =>{//...do something here}

<Formik onSubmit={(values, {setSubmitting })=> submitForm({values, setSubmitting})> {()=>(//...do something here)}

0 users liked answer #8dislike answer #80
Dương Nguyễn profile pic
Dương Nguyễn

Another simple approach is to useState and pass prop to the child formik component. There you can setState with a useEffect hook.

const ParentComponent = () => {
  const [submitFunc, setSubmitFunc] = useState()
  return <ChildComponent setSubmitFunc={setSubmitFunc}>
}

const ChildComponent= ({ handleSubmit, setSubmitFunc }) => {
   useEffect(() => {
     if (handleSubmit) setSubmitFunc(() => handleSubmit)
   }, [handleSubmit, setSubmitFunc])

   return <></>
 }
0 users liked answer #9dislike answer #90
Martin Atanasov profile pic
Martin Atanasov

I've implemented this in a React Class component, step by step :

1 - I've declared a "ref" variable to keep reference of form object, (useRef is valid only in function components so I've coded as below by using React.createRef() function )

constructor(props) {
  super(props);
  this.visitFormRef = React.createRef();
}

2 - There is an "innerRef" feature on formik forms, so I've assigned the ref variable above to it :

<Formik 
    initialValues={initialValues}
    onSubmit={(values) => onSubmit(values)}
    validationSchema={validationSchema}
    enableReinitialize={true}
    innerRef={this.visitFormRef}  //<<--here
>

3- To trigger the submit event of the form, from somewhere out of the form I have declared a function below :

triggerFormSubmit = () => {
    
    if (this.visitFormRef.current) 
        this.visitFormRef.current.handleSubmit();
}

4- And finally I've called the function above from an external button :

<Button onClick={() => this.triggerFormSubmit()} />

Note not to confuse : onSubmit(values) function which assined to the formik form, is still exists and it's getting the from values. We've just triggered it from an external button here

0 users liked answer #10dislike answer #100
Bulent Balci profile pic
Bulent Balci

Copyright © 2022 QueryThreads

All content on Query Threads is licensed under the Creative Commons Attribution-ShareAlike 3.0 license (CC BY-SA 3.0).