formik-antd

Simple declarative bindings for Ant Design and Formik.

Example

<Formik initialValues={{ firstName: "", age: 20, newsletter: false }}>
  <Input name="firstName" placeholder="first name" />
  <InputNumber name="age" min={0} />
  <Checkbox name="newsletter">Newsletter</Checkbox>
</Formik>

Getting started

npx create-react-app my-app
cd my-app
npm install formik antd @jbuschke/formik-antd
npm run start

Input components

As forms deal with user input this library aims to provide bindings for all Ant Design input components (the ones in the Data Entry section). All bound components have the same api as there Antd counterpart (component name and props) and additionally expose FormikFieldProps:

interface FormikFieldProps {
  name: string;
  validate?: (value: any) => undefined | string | Promise<any>;
}

The name: string property is always required and creates a binding between the component and a field of the form. I.e. <Input name="firstName"/> declares a textbox that is bound to the firstName field of the data that formik controls. To learn about Antd components just visit the official docs. Then import the corresponding formik-antd component from @jbuschke/formik-antd and provide the name property.

	Name	Props
✅	Checkbox	{ name, validate } & CheckboxProps
✅	Checkbox.Group	{ name, validate } & CheckboxGroupProps
✅	DatePicker	{ name, validate } & DatePickerProps
✅	Input	{ name, validate } & InputProps
✅	InputNumber	{ name, validate } & InputNumberProps
✅	Input.Password	{ name, validate } & InputPasswordProps
✅	Radio.Group	{ name, validate } & RadioGroupProps
✅	Switch	{ name, validate } & SwitchProps
✅	Input.TextArea	{ name, validate } & Input.TextAreaProps
✅	TimePicker	{ name, validate } & TimePickerProps
🔲	AutoComplete	{ name, validate } & AutoCompleteProps
🔲	Cascader	{ name, validate } & CascaderProps
🔲	Mention	{ name, validate } & MentionProps
🔲	Rate	{ name, validate } & RateProps
🔲	Slider	{ name, validate } & SliderProps
🔲	TreeSelect	{ name, validate } & TreeSelectProps
🔲	Transfer	{ name, validate } & TransferProps

Validation

Showing validation messages can be accomplished with the FormItem component. It renders error messages if the field has been touched and the corresponding field has a validation error.

<FormItem name="firstName" >
  <InputField name="firstName" />
</FormItem>

How the validation logic is done is not part of this library.

Lists / Nested objects

Nested objects and arrays can be accessed with lodash-like bracket syntax for the name property as described in the formik documentation.

<InputField name="friends[0].firstName" />

Buttons

Name	Props	Description
SubmitButton	Button	triggers form submission, is enabled when form valid
ResetButton	Button	resets the form, is enabled when form dirty

Playground & Contributions

If you want to dig into the source code and test locally you can use https://github.com/jannikbuschke/formik-antd-playground (clone with the --recursive flag and follow the README, its pretty simple).

TypeScript

Types are included.

Typechecking limitations

Form values currently cannot be typechecked (at least to my knowledge). For example the following ideally would give a compile error:

<Formik<{name:string}> initialValues={{name:""}}>
  <Input name="naem" />
</Formik>

Typescript cannot (yet) enforce types of children. In the future this hopefully will be possible.

License

MIT

jwmann/formik-antd