Formik: Formik's onSubmit expects (values: FormValues, actions: FormikActions<FormikValues>)

Created on 13 Nov 2018  路  3Comments  路  Source: formium/formik

馃悰 Bug report

Current Behavior

Documentation says that the second argument to onSubmit is formikBag.

Expected behavior

Actual implementation has the second argument to 'onSubmitasformikActions`.

Suggested solution(s)

Update the documentation (or if it's the code that's erraneous, update the code to pass formikBag instead of formikActions).

Additional context

Here seems to be a discussion of this in the past: https://github.com/jaredpalmer/formik/issues/234
Here is the actual code snippet that returns formikActions:
https://github.com/jaredpalmer/formik/blob/6a1f9825534942a40bf1c4bb3ba6dce3a2ffff6a/src/Formik.tsx#L435-L437

Your environment

| Software | Version(s) |
| ---------------- | ---------- |
| Formik | 1.3.1
| React | 16.5.2
| TypeScript | 3.1.3
| Browser | Firefox 63.0.1
| npm/Yarn | 6.4.1
| Operating System | MacOS 10.14

TypeScript Bug

Most helpful comment

This is fixed in v2.

All 3 comments

This is fixed in v2.

In case anyone else is looking for the correct typings when creating a onSubmit handler method in a react class:

interface FormValues {
  myString: string,
  myNumber: number
}

...

import {
  FormikActions,
} from 'formik'

...

public onSubmitHandler = (
  values: FormValues,
  formikActions: FormikActions<FormValues>
) => {
  console.log({ values, formikActions })
}

Quick question guys. Is there a way to pass multiple FormValues, in handleSubmit, handleSubmitSuccess methods? I have a conditional rendered form, and it needs 3 sets of formValues.

I currently have them as optional values inside the IValues, which is kind of wrong. See below:

interface IFullValues extends FormikValues {
  username?: string;
  email?: string;
  password?: string;
  group?: string;
}

  handleSubmitSuccess = (
    { username, email, password, group }: IFullValues,
    formikActions: FormikActions<IFullValues>
  ) => {
    const { onSave, mode } = this.props;
    const { setSubmitting } = formikActions;

    setSubmitting(false);
    if (mode === ActionMode.EDIT_INFO) {
      onSave({ username, email, group });
    } else if (mode === ActionMode.EDIT_PASSWORD) {
      onSave({ password });
    } else {
      onSave({ username, email, password, group });
    }
  };

I know the easiest solution is 3 forms, and I might end up doing that. But just so I know, is there a way to do that? Pass multiple IValues to handleSubmit?

Was this page helpful?
0 / 5 - 0 ratings