Form

A component that takes care of a form's lifecycle. It also wraps your component in a <form> element.

Props

Along with these props, you can pass any other props you want and all will get applied on the <form> element.

name

name: string (required)

The name of your form.

onSubmit

onSubmit: (values: Object) => Promise<any> | void

If you provide an onSubmit callback, it will get called with your form values.

• It is only called if the form is valid (no field has an error)

• If onSubmit returns a promise, it also calls submitStart and submitStop functions at the beginning/end of the promise.

const handleSubmit = values => console.log(values);

const MyForm = props => (
  <Form onSubmit={handleSubmit}>
    <InputField name="name">
    <button type="submit">Submit</button>
  </Form>
);

Note: All events are touched and preventDefault is called even if you didn't supply your custom onSubmit, or the form is invalid.

persistent

persistent: boolean

If true, your form won't get destroyed on unmount.

withRef

withRef: (el: HTMLFormElement) => void

A function that will be passed as a ref callback to the created <form> element.

Example

A basic form named contact.

import { Form } from 'redux-forms-react';

const MyForm = props => (
  <Form name="contact">
    {/* any children you like */}
  </Form>
);

export default MyForm;