Skip to content
This package serves as the entry point to the Formik Form state management library. It is intended to be paired with the generic Fonk package, which is shipped as to npm.
TypeScript JavaScript
Branch: master
Clone or download
Latest commit 5db77e1 Dec 19, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.circleci
.vscode Add base project structure Oct 17, 2019
config/test
src fix class methods Nov 26, 2019
typings
.babelrc
.editorconfig
.eslintignore
.eslintrc.js
.gitignore Add base project structure Oct 17, 2019
.prettierrc
LICENSE
README.md
package.json
rollup.config.js Add base project structure Oct 17, 2019
tsconfig.json

README.md

fonk-formik

CircleCI NPM Version bundle-size

This package serves as the entry point to the Formik Form state management library (Live example). It is intended to be paired with the generic Fonk package, which is shipped as to npm.

Start by reading this post (Formik + Fonk)

Check our Fonk Documentation site and Formik section.

Adding Fonk to Formik allows you to seamlessly add validation capabilities to Formik.

In order to use Fonk with Formik you will have to install fonk-formik adaptor:

npm install @lemoncode/fonk @lemoncode/fonk-formik --save

The main change to apply when using a fonk-formik comes when you want to instantiate Fonk engine with your form validation schema, instead of calling createFormValidation , just replace that entry with createFormikValidation

- import { createFormValidation, Validators } from '@lemoncode/fonk';
+ import { Validators } from '@lemoncode/fonk';
+ import { createFormikValidation } from '@lemoncode/fonk-formik';

const validationSchema = {
  field: {
    email: [Validators.required.validator],
    password: [Validators.required.validator]
  }
};

- export const formValidation = createFormValidation(validationSchema);
+ export const formValidation = createFormikValidation(validationSchema);

Now you can hook to Formik form validation (example):

    <Formik
      initialValues={{ email: "", password: "" }}
+     validate={values => formValidation.validateForm(values)}
      onSubmit={(values, { setSubmitting }) => {
        setTimeout(() => {
          alert(JSON.stringify(values, null, 2));
          setSubmitting(false);
        }, 400);
      }}
    >

And if you want to hook to Formik field validations (example):

  <form onSubmit={handleSubmit}>
    <Field
      name="email"
+     validate={(value) => formValidation.validateField("email", value)} />

Example: How to display field validation error message:

    <Field name="email"/>
+    {errors &&
+      errors.email &&
+       touched.email &&
+       <div>{errors.email}</div>}

Examples:

Basic example

Using formik Field

Firing validations at field level

Asynchronous validation

Customizing validator's error messages globaly

Customizing validator's error messages just for a given form

Creating custom validators

Validating nested fields

Defining record validations

About Basefactor + Lemoncode

We are an innovating team of Javascript experts, passionate about turning your ideas into robust products.

Basefactor, consultancy by Lemoncode provides consultancy and coaching services.

Lemoncode provides training services.

For the LATAM/Spanish audience we are running an Online Front End Master degree, more info: http://lemoncode.net/master-frontend

You can’t perform that action at this time.