from version 1.6 and onwards this library is published underformik-antd, all previous versions are available under@jbuschke/formik-antd
formik-antd
Simple declarative bindings for Ant Design and Formik.
Example
```jsx import React from "react"; import { Form, Input, InputNumber, Checkbox } from "@jbuschke/formik-antd"; import { Formik } from "formik"; (<Form><Input name="firstName" placeholder="First Name" /><InputNumber name="age" min={0} /><Checkbox name="newsletter">Newsletter</Checkbox></Form>Getting started
``` npx create-react-app my-app cd my-app npm install formik antd @jbuschke/formik-antd npm run start ``` Addimport "antd/dist/antd.css to your index.js file (or look at https://ant.design/docs/react/getting-started for other options).
Core Concept
This library enriches several Ant Design components with aname: string property that connects them to a Formik form field. It is pretty simple:
- Import a supported Ant Design component from
formik-antd(i.e.import { Input } from "@jbuschke/formik-antd".
- Declare an instance of the component inside a
<Formik>component.
- Provide the
nameproperty (i.e."firstName").
Formik field!
The Ant Design components are feature rich and provide a lot of props to customize their vizual presentation. These features and also their apis stay the same. Visit their documentation to learn more.
Core Components
To learn about Antd components just visit the official docs. Most supported components are found in the Data Entry section. | | Name | Props | | --------------------- | -------------------------- | ---------------------------------------------------------------------------------------------------------------- | | :whitecheckmark: | AutoComplete | { name, validate? } & AutoCompleteProps | | :whitecheckmark: | Cascader | { name, validate? } & CascaderProps | | :whitecheckmark: | Checkbox | { name, validate? } & CheckboxProps | | :whitecheckmark: | Checkbox.Group | { name, validate? } & CheckboxGroupProps | | :whitecheckmark: | DatePicker | { name, validate? } & DatePickerProps | | :whitecheckmark: | DatePicker.WeekPicker | { name, validate? } & WeekPickerProps | | :whitecheckmark: | DatePicker.RangePicker | { name, validate? } & RangePickerProps | | :whitecheckmark: | DatePicker.MonthPicker | { name, validate? } & MonthPickerProps | | :whitecheckmark: | Input | { name, validate? } & InputProps | | :whitecheckmark: | InputNumber | { name, validate? } & InputNumberProps | | :whitecheckmark: | Input.Password | { name, validate? } & InputPasswordProps | | :whitecheckmark: | Input.TextArea | { name, validate? } & Input.TextAreaProps | | :whitecheckmark: | Mention | { name, validate? } & MentionProps | | :whitecheckmark: | Radio.Group | { name, validate? } & RadioGroupProps | | :whitecheckmark: | Rate | { name, validate? } & RateProps | | :whitecheckmark: | Select | { name, validate? } & SelectProps | | :whitecheckmark: | Slider | { name, validate? } & SliderProps | | :whitecheckmark: | Switch | { name, validate? } & SwitchProps | | :whitecheckmark: | TimePicker | { name, validate? } & TimePickerProps | | :whitecheckmark: | Transfer | { name, validate? } & TransferProps | | :whitecheckmark: | TreeSelect | { name, validate? } & TreeSelectProps |Form- and Field-level Validation
Formik provides form- and field-level validation callbacks to provide validation logic. How to validate is neither part of formik nor of this library. Form-level validation is done by setting formiksvalidate prop. Field-level validation is optional available on the components. Additional to the name prop formiks optional validate?: (value: any) => undefined | string | Promise<any> is added to all core components to allow field-level validation.
There is one special case to be aware of when using field-level validation: When using the Form.Item component with another Antd-field component, the validate prop has to be added to the Form.Item, not the input component:
```jsx
```
Rendering Validation Feedback
Showing validation messages can be accomplished with theForm.Item component (or FormItem which is the same). It
- renders error messages if the field has been touched and the corresponding field has a validation error (and changes the border color of enclosed input component to red).
- renders a green success icon messages if it's
showValidateSuccess: booleanprop is set to true, the field has been touched and the corresponding field does not have a validation error.
- exposes some layout features and a label (visit https://ant.design/components/form/ for the details).
Submitting and Resetting Forms
Directly under each<Formik> container a <Form> component should be placed (unless you do not need it). This component composes the functionality provided by Ant Designs <Form> https://ant.design/components/form/ as well as Formiks (https://jaredpalmer.com/formik/docs/api/form):
```jsx
import React from "react";
import { Form, SubmitButton, / ... / } from "@jbuschke/formik-antd";
import { Formik } from "formik";
{/* ... */}<SubmitButton />Submitting & Resetting
| Name | Props | Description | | ------------ | ----------------------------------------------- | ---------------------------------------------------- | | SubmitButton | Button | triggers form submission, is enabled when form valid | | ResetButton | Button | resets the form, is enabled when form dirty | The SubmitButton must be placed inside aForm component.
Lists and Nested objects
Nested objects and arrays can be accessed with lodash-like bracket syntax as described in the Formik documentation. ```jsx 0.firstName" /> ```ES imports
``` npm install babel-plugin-import customize-cra react-app-rewired --save-dev ```config-overrides.js
```js
const path = require('path')
const { override, fixBabelImports } = require('customize-cra')
module.exports = override(
fixBabelImports('antd', {libraryName: 'antd',libraryDirectory: 'es',style: 'css',}),fixBabelImports('formik-antd',{libraryName: '@jbuschke/formik-antd',libraryDirectory: 'es'style: "css",},)package.json
```json
"scripts": {
"start": "react-app-rewired start","build": "react-app-rewired build"