Build forms in React, without the tears 😭

Current Behavior

If there is an "external" component controlling initialValues passed to Formik, Formik never updates it. This may be desired behavior, however in my specific case I need to re-render the form (and ideally, warn the user about unsaved changes) with new initialValues. If this is not a bug, any ideas on how to achieve this?

Steps to Reproduce

1. Open https://codesandbox.io/s/kworjlq7n3
2. Toggle between the select options
3. You will see that all components in the chain re-render with new values, however Formik render never changes initialValues.

Expected behavior

When initialValues change, Formik should trigger a re-render and provide new initialValues in its render method.

CodeSandbox Link: https://codesandbox.io/s/kworjlq7n3

EDIT: CodeSandbox demonstrates a working solution

• Formik Version: 1.0.2
• React Version: 16.3.2
• TypeScript Version: N/A
• Browser and Version: Chrome Version 68.0.3440.84 (Official Build) (64-bit)
• OS: Mac OS 10.13.4

Improvements

• [x] Create <Field as> prop (#1406)
• [x] Add meta prop to <Field children> (#1406)
• [x] Break out useFormik from <Formik>
• [x] onReset and handleReset tests
• [x] async onSubmit (no more setSubmitting(false) needed)
• [x] Make validation cancellable (#1026, #671)
• [x] useField's second element is field metadata (#343)
• [x] Add initialErrors, initialTouched, initialStatus (#1410)
• [x] Fix isValid (#1410)
• [ ] <Field >'s uses handleBlur('path') and handleChange('path') override (#1113)
• [x] Upgrade to TypeScript 3.5 and React 16.9 (#1559)

Breaking Changes

• Breaking TypeScript change: FormikActions have been renamed to FormikHelpers
• Formik no longer uses console.error in its warnings, but rather console.warn

Deprecations

These are just warnings for now.

• [x] <Field render> (#1406)
• [x] <Field component> (#1406)
• [x] isInitialValid and fix isValid (#1410)

Documentation

• [ ] useField
• [ ] "Creating your own <FieldGroup>"
• [ ] Checkboxes and Radio inputs
• [ ] <FormikConsumer>
• [ ] useFormikContext
• [ ] useFormik
• [ ] Rewrite examples with hooks
• [ ] Rewrite tutorial with hooks
• [ ] Migration Guide
• [ ] Blog post

Feel free to start making PR's to this branch. This is going to take a minute to figure out as there are a LOT of new paradigms.

#1046 #1005

Feature

Current Behavior

setFieldValue() is async because it uses setState(), but it doesn't receive a callback or return anything. That's why it's hard to get modified values right after that, for example if I want to run submitForm().

Desired Behavior

setFieldValue() will return a promise, so I could await it and get changed values.

Suggested Solutions

return a Promise from setFieldValue() OR add additional callback to function declaration

• Formik Version: 0.11.11
• React Version: 16.2.0
• CodeSandbox Link: https://codesandbox.io/s/x9445yl5lp

This is my quick suggestion to solve issue #202 . It is far from perfect (I don't use Typescript so I neglected types), also, I couldn't make lodash/fp working with Typescript, so I needed to use mutable _.set, and sadly I used it with deepClone. Of course this would need to be refactored, but this is just a prototype.

If you like this idea, we could work on it more, add missing tests etc.

The good news is, that all tests are passing so it is backward compatible change :)

What if the user has set some field values, and we do store them somewhere, and when the user returns to the app those values are invalid. Is there no way to run validate on initialization?

I tried adding trim() to my formik validation schema:

Yup.object().shape({
    label: Yup.string().trim().required('some error msg'),
});

But the field value is not being trimmed.

Formik is great, but there are one or two parts where the methods could be a little more TypeScript friendly, and in this PR I'm introducing a new method which I hope takes a step in this direction.

For context: I have a form where a user can enter an ID into a field to perform a lookup. Data is fetched over HTTP, and I use data from the response to populate other form fields by using multiple setFieldValue calls. The signature of setFieldValue isn't type-safe – the value is any, and the field may not necessarily exist. (There was some discussion of this in #1388)

This PR introduces a setFieldValues method that takes a Partial<Values> and merges that with the existing form values. I would find this really useful.

Things that I'm not too sure about, and that I'd welcome feedback on:

• Does this method go against the design of Formik, where fields are referenced using the path-style string (eg. people.0.first_name)?
• Is there a better name for this method, than setFieldValues? It's basically like setValues, but it allows subsets and merges rather than overwriting.

I'm just playing with formik library and found performance issue with custom component in Field tag when the custom component uses styled components heavily.

When I keep pressing the key in an input box which is wrapped in multiple hierarchy of styled components, it causes huge lagging but instead of that, if I use simple divs, it is comparatively faster.

• [ ] Hooks (#1063)
• [ ] Use JSX generics on <Field<Values>> (#726 , #370)
• [ ] Add debugger / logger
• [ ] Begin deprecating dirty, with warning (replaced withisDirty) (#353)
• [ ] Add submitAttemptCount, submitFailureCount, submitSuccessCount and computed boolean counters? didSubmitSucceed and didSubmitFail or submitFailure / submitSuccess
• [ ] Add warnings, setFieldWarning, setWarnings (#1001, #389)
• [x] Async onSubmit (#486 , #500)
• [x] Ensure that Formik context value is immutable
• [ ] Promisify or give callbacks to all setFieldXXX functions

I have a large form with 20~30 fields. It seems formik becomes slow when there are large number of fields. It seems to validate every field on every keystroke. Is there a good way to mitigate this issue?

Bug, Feature, or Question?

Feature/Question

Current Behavior

I only show error messages when a field is touched and has a error message. The problem when clicking submit it should show error messages for all fields but since they are not getting marked as touched no error shows up

Desired Behavior

When emitting the handleSubmit event all fields in the form should be touched/there should be a flag that indicates if the form was submitted and not reseted.

• Formik Version: 0.11.10
• OS: Mac OS
• Node Version: v9.5.0
• Package Manager and version: Yarn 1.3.2

Bug report

Current Behavior

interface IUser { name: string; noOfSubjects: number; }

export default function UserDetails(){ const formikForm = useFormik({ initialValues: {name:"",noOfSubjects:0}, handleSubmit: (values)=> { console.log(values); //Here the noOfSubject values in string i want to pass it as number in payload } }) return(

//Select input with value in number

) }

//Current Output : {name:"testing",noOfSubject:"1"}

Expected behavior

In the payload of handle submit i want the values with json like ---- {name:"testing",noOfSubject:1}

Reproducible example

Suggested solution(s)

Additional context

Your environment

| Software | Version(s) | | ---------------- | ---------- | | Formik | | React | | TypeScript | | Browser | | npm/Yarn | | Operating System |

Scenarios like this <Field name="test1" valdiation={validationField}>

Here we have validationField method, based on the second input filed value we need to set the error of the field of the second input.

i tried like with validationField(formik: FormikProps) => but it was return as undefiend.

Bug report

Current Behavior

Crashes the browser

Expected behavior

To work the same as when using string keys

Reproducible example

<Formik initialValues={{}} onSubmit={(v) => console.log(v)}>
        <form>
          <Field name="kitIds[45345345][1]" placeholder="gello" />
          <Field name="kitIds[45345345][2]" placeholder="gello" />
          <Field name="kitIds[two][3]" placeholder="gello" />
          <Field name="kitIds[two][4]" placeholder="gello" />
          <button type="submit">Submit</button>
        </form>
</Formik>

Suggested solution(s)

Should work the same as string keys

Additional context

Adding a letter to the keys solves this bug but not an ideal solution, should work the same as string keys

<Formik initialValues={{}} onSubmit={(v) => console.log(v)}>
        <form>
          <Field name="kitIds[X45345345][1]" placeholder="gello" />
          <Field name="kitIds[X45345345][2]" placeholder="gello" />
          <Field name="kitIds[two][3]" placeholder="gello" />
          <Field name="kitIds[two][4]" placeholder="gello" />
          <button type="submit">Submit</button>
        </form>
</Formik>

Your environment

| Software | Version(s) | | ---------------- | ---------- | | Formik | 2.2.9 | React | 18.2.0 | TypeScript | 4.7.4 | Browser | Chromium 108.0.5359.99 | npm/Yarn | npm 8.12.1 | Operating System | Ubuntu 22