jaredpalmer / jaredpalmer/formik

Add validationSchema to FormikProps

Open
#797 22 comments 14 reactions 0 assignees View on GitHub
Type: Enhancement
Dominant language
TypeScript
Stars
34.3k
Forks
2.8k
PR merge metrics
No merged PRs in 30d

Description

## Current Behavior
One of the reasons Formik is so great is that it plays very nicely with `yup`. With `yup`, we dont need to combine validations with ui, we can use `yup` for validations and Formik just for view layer. Especially for complex forms, it really simplifies the code, makes it more understandable and more testable.

However, there is a small price to pay, sometimes ui might need the access to validation rules, for example to display `*` for required fields. Right know the answer is to use an additional prop passed to `Field` component, like `required`. Unfortunately this is a duplication, as in this case we already used `yup.string().required()` for instance.

## Desired Behavior

With `validationSchema` passed as part of `FormikProps`, schema itself could be used to get required information.

## Suggested Solution

If he had `schemaValidation` object passed to `Field` component, we could use `yup` `reach` to get to schema part we are interested in a given field and `describe` to get tests for the given schema, like `required`

## Who does this impact? Who is this for?

It gives an additional, but optional option to everyone to style field components.

## Describe alternatives you've considered

Code duplication.

## Additional context

N/A

Contributor guide

Open the contributing guide

Research direction

Start by locating the FormikProps type and the Field component entry point, then review how validationSchema is currently passed and exposed. Resolve whether the requested API belongs on FormikProps, Field, or both, and define how a Yup schema reaches an individual field. Done means the optional schema is available where requested and the required-field information can be read without duplicating validation rules.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, typescript
Domain
api, frontend
Issue type
Feature
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.