Patch release

• Add validateForm() to the FormikBag so you can imperatively validate stuff.
• Fix definition of dirty when accessed via context.

Internal stuff

• Optimized state updates for <FieldArray>.
• Refactor Formik bag getters internally

Patch Release

#396 Modifies behavior of FieldArray's props.pop() and FieldArray props.remove() to remove relevant nested partials of from touched and errors objects in addition to values so that validation works as expected with array manipulations.

Thank you @a-tarasyuk @davidhenley @rovansteen @timc13

Patch Release

Fix handleReset if onReset is not specified

✨ Formik 11.0 ✨

The New stuff 💎 ✨

• Support for both path and dot syntax for handling deep updates and arrays <Field name="social.facebook" /> and <Field name="friends[1]" />
• Sync and Async field-level validation via <Field validate={value => ...} />
• A new onReset prop for <Formik />.
• New <FieldArray> component
• TypeScript 2.6.2 support, 2.7.x in the next few days
• React 16

import React from 'react';
import { Formik, Form, Field, FieldArray } from 'formik'

export const FriendList = () => (
  <div>
    <h1>Friend List</h1>
    <Formik
      initialValues={{ friends: ['jared', 'ian', 'brent'] }}
      onSubmit={...}
      render={formikProps => (
        <FieldArray
          name="friends"
          render={({ move, swap, push, insert, unshift, pop }) => (
            <Form>
              {/*... use these however you want */}
            </Form>
          )}
        />
    />
  </div>
);

Potentially Breaking Change ⚠️ 🚒 🚫 PLEASE READ.

dirty (and thus isValid) has changed due to popular demand/consensus.

Old meaning: "has any field been touched?"
New meaning: "has any field value changed?"

Deprecations

handleChangeValue has been removed entirely. It's been deprecated since 0.8

Patch Release

• Removed setFieldTouched call in <FieldArray />

Formik 0.11.0 Release Candidate 1

The New stuff 💎 ✨

• Adds optional bracket path support
• Fixes TypeScript 2.6.2 issue and improves type inferencing. Thank you @weswigham and the Microsoft TypeScript team for supporting Formik. Going forward, TypeScript core now checks / smoke tests against Formik (and Apollo) to make sure that any changes are either non-breaking, or coordinated.
• Added an example to the next branch of how to do a multi-step form wizard.

Potentially Breaking Change ⚠️ 🚒 🚫 PLEASE READ.

• dirty (and thus isValid) has changed due to popular demand/consensus.

Old meaning: "has any field been touched?"
New meaning: "has any field value changed?"

In the works 👷‍♀️ 🚧

• onReset: (values: Values, bag: FormikBag<Values>) config / prop that runs prior to a resetForm
• unsafe_setFormikState: (whateveryouwant: any) => void.
• submitCount: Will track number of submit attempts
• An optimized version of <Field> that does not rerender
• Add meta property on <Field>.
• Leverage forthcoming context API
• validateForm, isValidating

Future 👀 ⏭

• softSubmit, handleSoftSubmit?
• async render funsies

Alpha 3

• <FieldArray> + helpers

Will add docs when this gets moved to master

Alpha 4

NO API CHANGES

Under the hood

• Updated to TypeScript 2.6.2, React 16, Enzyme 3, Jest 21

Beta 1

• Fixed TypeScript types of <FieldArray>

Alpha 2

Patch

#290 Fix missing argument in Field's setFieldError

ALPHA RELEASE

• #207 Nested path syntax for handling deep updates and arrays
• #276 Sync and Async field-level validation via <Field validate={value => ...} />

Deprecations

• handleChangeValue has been removed entirely. It's been deprecated since 0.8

🐛 Bug Fix

• Allow non-function children in <Field> so that <Field component="select"><option /><option /></Field> works

0.10.0

Fully backwards compatible. No breaking changes.

🐛 Bug Fixes

• Fix checkbox behavior #223 by

🎉 New Feature

<Field> now also accepts a render prop.

Before

<Field name="firstName" placeholder="First Name"  />
<Field name="firstName" placeholder="First Name" component={MyInput}  />

After

<Field name="firstName" placeholder="First Name"  /> // same as before
<Field name="firstName" placeholder="First Name" component={MyInput}   /> // same as before

<Field 
   name="firstName"
   render={({field, form}) => /* note: props to Field not passed thru, cuz they are available already  */
      <div>
          <input {...field} placeholder="firstName" />
           {/* whatever */}
      </div>
  } 
/>

<Field name="firstName">
   {({field, form}) => 
      <div>
          <input {...field} placeholder="firstName" />
           {/* whatever */}
      </div>}
</Field>

With TypeScript

import * as React from 'react';
import { Formik, FormikProps, Form, Field, FieldProps } from 'formik';


interface MyFormValues {
  firstName: string;
}

export const MyApp: React.SFC<{}> = () => {
  return (
    <div>
      <h1>My Example</h1>
      <Formik
        initialValues={{ firstName: '' }}
        onSubmit={(values: MyFormValues) => alert(JSON.stringify(values))}
        render={(_formikBag: FormikProps<MyFormValues>) =>
          <Form>
            <Field
              name="firstName"
              render={({ field, form }: FieldProps<MyFormValues>) =>
                <div>
                  <input type="text" {...field} placeholder="First Name" />
                  {form.touched.firstName &&
                    form.errors.firstName &&
                    form.errors.firstName}
                </div>}
            />
          </Form>}
      />
    </div>
  );
};

Real-world example (composing render functions)

import * as React from 'react';
import * as cx from 'classnames';
import { Field, FieldConfig, FieldProps } from 'formik';

export interface FieldsetProps {
   /** blah */
}
// This wraps `<Field render>` with our error/touched logic, display, and formatting. 
export const Fieldset: React.SFC<FieldsetProps & FieldConfig> = ({ name, render, ...rest }) =>
  <Field
    name={name}
    render={({ field, form }: FieldProps<MyFormValues>) =>
      <div
        className={cx('fieldset', {
          'fieldset--error': form.errors[name] && form.touched[name],
        })}
      >
        {render({ field, form })}
        {form.touched.firstName &&
          form.errors.firstName &&
          form.errors.firstName}
      </div>
   }
   {...rest}
  />;

import * as React from 'react';
import { Formik, FormikProps, Form, Field, FieldProps } from 'formik';

export interface MyAppProps {}

interface MyFormValues {
  firstName: string;
}

export const MyApp: React.SFC<MyAppProps> = () => {
  return (
    <div>
      <h1>My Example</h1>
      <Formik
        initialValues={{ firstName: '' }}
        onSubmit={(values: MyFormValues) => alert(JSON.stringify(values))}
        render={({
          _formikBag /* values, errors, handleChange ... */,
        }: FormikProps<MyFormValues>) =>
          <Form>
            <Fieldset
              name="firstName"
              render={({ field }: FieldProps<MyFormValues>) =>
                /** Stay DRY, just deal with the input, since errors handled in Fieldset */
                <input type="text" {...field} />}
            />
          </Form>}
      />
    </div>
  );
};

Note: In order to maintain backwards compat, the order or precedence among the render functions is DIFFERENT than <Formik />'s.

• <Field>: render > children > component
• <Formik>: component > render > children

This is because <Field/> defaults to component="input"

Patch Release

• #197 Calling props.resetForm(nextValues) will now set props.initialValues = nextValues.

New contributor 🎉

• @slightlytyler

Changes

• #168 Formik will no longer automagically reset the form when initialValues change. I added this feature thinking it would be desirable on most apps. However, it appears that I was wrong and it created headaches for people using Redux to get their initial values. Sorry about that. That's on me. If you still want this behavior, pass <Formik enableReinitialize={true}/> or withFormik({ enableReinitialize: true })(...). \

If you want to have more control, initialValues (i.e. initialValues as of first mount) is now available in props, so you can use that to control reset behavior with more granularity if you want to.

Bug Fix / Optimization

• #176 Run validations on methods in a callback. This allows React to batch updates and avoid a double render! Thanks @jontansey

New contributors 🎉

• @jontansey
• @skvale

What's coming?

• There is some progress on synchronous Yup. This would be game changing for testing.
• I benchmarked Redux Form vs. Formik and its not even a competition. I am working on a blog post this weekend. In the process, though, I also found a way to very safely optimize vanilla <Field/> (i.e. one's without custom component's) using shouldComponentUpdate. I have not yet released this because of I want to wait on #182 and #167 . Those on the bleeding edge can copy and paste the code from #185 .
• Website is in the works.

Patch Release

• #180 Correctly pass props to validate and validationSchema in withFormik()
• #169 Fix check to call resetForm on componentWillReceiveProps

After some discussion validateOnBlur is now set to true by default.

🎉 What's new?

• New <Formik /> component
• <Field /> and <Form /> helpers
• mapValuesToPayload has been removed
• Improved warnings and error messages
• More docs and examples
• Website in the works...

🚧 Potentially breaking changes

• validateOnChange now defaults to true
• validateOnBlur now defaults to false

🚨 🚨 Breaking change 🚨 🚨

• Formik() has been renamed withFormik(). (The named Formik import is now used for the component and not for the HoC)

Migrating from 0.8.x to 0.9.x

The Formik() HoC function in 0.8.x has been renamed withFormik() in 0.9.0. Since withFormik() is fully backwards compatible (in both plain JavaScript and TypeScript), you can safely do a search and replace and things will just work.

Before (0.8.x)

import { Formik } from 'formik'

const enhancer = Formik({ ... config ... })

...

After (0.9.x)

import { withFormik } from 'formik'

const enhancer = withFormik({ ... config ... })

...

• Fix type signature of FormikBag in withFormik()

• Fix TS type in handleSubmit of withFormik

Begin internal migration to 0.9.0 @PalmerHQ ...