Formik: The Formik component's validationSchema prop does not pass the FormikProps as parameter to the given function

[elertan]

Current Behavior

Docs shows the prop signature using a function that takes a parameter and returns the schema.

But in my case nothing was passed into the props.

Steps to Reproduce

Use a Formik component with the validationSchema prop set to a function that takes in the prop as a parameter.

Expected behavior

The prop should be filled with information related to the formik instance, so we can dynamically create a validationSchema based on filled in information (in my case postal codes change depending on selected country)

Suggested solution(s)

Simply pass the instance on into the function.

Additional context

CodeSandbox Link:

---

• Formik Version: 1.1.1
• React Version: ^16.2.0
• TypeScript Version: 3.0.1
• Browser and Version: 68.0.3440.106 (Official Build) (64-bit)
• OS: Mac OS 10.13.6 (17G2208)
• Node Version: v8.11.4
• Package Manager and Version: yarn 1.9.4

[inooid]

Hi @elertan,

I don't believe this is an actual bug, but just a slight misinterpretation of the docs. In the documentation there's two different ways of using Formik, one is the _HoC way_ and another is the _render prop component_ way. You seem to be using the <Formik /> component way, which specifies the following in the docs:

Note down here there's two references for the validationSchema in the docs

So the props are only passed to the validation schema if you're using the HoC way.

Also: the props that are specified by the docs are not the formik bag props (such as the values, errors, etc.), but these are the props that you pass to the component (in this case the HoC). I hope I answered your questions!

[elertan]

Thanks @inooid! It's still a bit confusing seeing 2 docs right next to each other, but it definitely makes sense now.

[emil14]

Why can't we get props or formikBag in Formik's validationSchema like we do with withFormik?

[kanso-git]

well in fact you can here under the code
.
.
handleSubmit(values, { props, resetForm, setErrors, setSubmitting }) {
// let's suppose that we do a server validtion call
props.initiateLogin();
props.login(values);
setSubmitting(false);
},
validationSchema(props){
return object().shape({
username: string().required(USERNAME_REQUIRED),
password: string()
.min(3, PASSWORD_MIN_LENGTH_ERROR)
.required(PASSWORD_REQUIRED)
})
}

[MaxInMoon]

Why this isn't specified on the doc? (did I miss something?)
Would love to see a real world example.

[MaxInMoon]

I found a way without passing with withFormik hoc:

<Formik
  ...
  validationSchema={() => validationSchema(this.props)}
/>