Formik: How to call handleSubmit manually??

[mehdibalouchi]

I want to submit my form by calling handleSubmit function, but handleSubmit gives an event as argument. is there any way to call handleSubmit manually?

[danhayden]

Have you tied the new submitForm method in v0.8.0? You could then pass in a function as a prop to be called with the payload of the form.

[danhayden]

An example of what I mean can be found in https://github.com/jaredpalmer/formik/issues/73#issuecomment-317169770

[mehdibalouchi]

I just updated to v0.8.1 and when I use submitForm() it throws an error:
Uncaught TypeError: this.props.submitForm is not a function

[danhayden]

Does the code in https://github.com/jaredpalmer/formik/issues/73#issuecomment-317169770 help?

[mehdibalouchi]

@danhayden the code in comment is about calling submitForm externally (I think). I want to call this inside the form component which will be wrapped by Formik. this is why I am using this.props.submitForm.
I do not have access to the wrapper ref inside the form component

[danhayden]

Could you provide a code sample of what you have so far?

[mehdibalouchi]

I have a simple component that has form input fields:

class MyForm extends React.Component {
    componentWillReceiveProps(newProps){
        if(newProps.trySubmit)
            this.props.submitForm();
    }
    render() {
        return (
                    <form>
                        <div>
                        <TextField onChange={this.props.handleChange} name="Name" value={this.props.values.Name} errorText={this.props.errors.Name} floatingLabelText="Name" fullWidth={true}/>
                        </div>
                        <div>
                        <TextField onChange={this.props.handleChange} name="IATACode" value={this.props.values.IATACode} errorText={this.props.errors.IATACode} floatingLabelText="IATA Code" fullWidth={true}/>
                        </div>
                        <div>
                        <TextField onChange={this.props.handleChange} name="ICAOCode" value={this.props.values.ICAOCode} errorText={this.props.errors.ICAOCode} floatingLabelText="ICAO Code" fullWidth={true}/>
                        </div>
                    </form>
        )
    }
}

I wrap this component with Formik:

export default Formik({
validationSchema: Yup
        .object()
        .shape({
            Name: Yup
                .string()
                .required(),
            IATACode: Yup
                .string()
                .max(3, 'IATACode must be 3 charachters')
                .min(3, 'IATACode must be 3 charachters')
                .required(),
            ICAOCode: Yup
                .string()
                .required()
        }),

    mapPropsToValues: (props: any) => {
        if(props.airport)
            return ({Name: props.airport.Name, IATACode: props.airport.IATACode, ICAOCode: props.airport.ICAOCode, id: props.airport.id})
        return {Name: "", IATACode: "", ICAOCode: "", id: ""}
    },

    mapValuesToPayload: (values) => ({Name: values.Name, IATACode: values.IATACode, ICAOCode: values.ICAOCode, id: values.id})
})(MyForm)

as you can see I want to call submitForm on a props change but I do not have access to that in the component Props

[danhayden]

I have just tried on my own project and I am able to access this.props.submitForm() from within the form component that is wrapped by Formik.
This might sound ridiculous but have you restarted your build since updating Formik? I've had similar issues in the past where my build still had an old version of a module in cache after I've updated it.

[mehdibalouchi]

turns out that the problem is accessing props from within the componentWillReceiveProps.
instead of

componentWillReceiveProps(newProps){
        if(newProps.trySubmit)
            this.props.submitForm();
    }

I should access props with newProps. like this:

componentWillReceiveProps(newProps){
        if(newProps.trySubmit)
            newProps.submitForm();
    }

and now everything works fine. thanks @danhayden