- Redux Form
- API
props
props
The
props
listed on this page are are theprops
thatredux-form
generates to give to your decorated form component. Theprops
that you pass into your wrapped component are listed here.If you are a strict
PropTypes
completionist,redux-form
exports all of thesepropTypes
, so you may import them, like so:
import {reduxForm, propTypes} from 'redux-form';
class SimpleForm extends Component {
static propTypes = {
...propTypes,
// other props you might be using
}
// ...
}
anyTouched : boolean
true
if any of the fields have been marked astouched
,false
otherwise.
asyncValidate : Function
A function that may be called to initiate asynchronous validation if asynchronous validation is enabled.
asyncValidating : String | boolean
This value will be either:
false
- No asynchronous validation is currently happeningtrue
- Asynchronous validation is currently running in preparation to submit a form- a
string
- The name of the field that just blurred to trigger asynchronous validation
destroy() : Function
Destroys the form state in the Redux store. By default, this will be called for you in
componentWillUnmount()
.
dirty : boolean
true
if the form data has changed from its initialized values. Opposite ofpristine
.
error : String
A generic error for the entire form given by the
_error
key in the result from the synchronous validation function, the asynchronous validation, or the rejected promise fromonSubmit
.
handleSubmit(eventOrSubmit) : Function
A function meant to be passed to
<form onSubmit={handleSubmit}>
or to<button onClick={handleSubmit}>
. It will run validation, both sync and async, and, if the form is valid, it will callthis.props.onSubmit(data)
with the contents of the form data.Optionally, you may also pass your
onSubmit
function tohandleSubmit
which will take the place of theonSubmit
prop. For example:<form onSubmit={handleSubmit(this.save.bind(this))}>
If your
onSubmit
function returns a promise, thesubmitting
property will be set totrue
until the promise has been resolved or rejected. If it is rejected with an object matching{ field1: 'error', field2: 'error' }
then the submission errors will be added to each field (to theerror
prop) just like async validation errors are. If there is an error that is not specific to any field, but applicable to the entire form, you may pass that as if it were the error for a field called_error
, and it will be given as theerror
prop.To recap, there are two ways to use
handleSubmit
:1. pass it a function to call
**2. pass in such a function as the onSubmit prop to your decorated component**<button onClick={handleSubmit(data => { // do something with data. validation will have been called at this point, // so you know the data is valid })}>Submit</button>
<MyDecoratedForm onSubmit={data => { // do something with data. validation will have been called at this point, // so you know the data is valid }}/>
initialize(data:Object) : Function
Initializes the form data to the given values. All
dirty
andpristine
state will be determined by comparing the current data with these initialized values.
invalid : boolean
true
if the form has validation errors. Opposite ofvalid
.
pristine: boolean
true
if the form data is the same as its initialized values. Opposite ofdirty
.
reset() : Function
Resets all the values in the form to the initialized state, making it pristine again.
submitting : boolean
Whether or not your form is currently submitting. This prop will only work if you have passed an
onSubmit
function that returns a promise. It will betrue
until the promise is resolved or rejected.
submitFailed : boolean
Starts as
false
. IfonSubmit
is called, and fails to submit for any reason,submitFailed
will be set totrue
. A subsequent successful submit will set it back tofalse
.
touch(...field:string) : Function
Marks the given fields as "touched" to show errors.
untouch(...field:string) : Function
Clears the "touched" flag for the given fields
valid : boolean
true
if the form passes validation (has no validation errors). Opposite ofinvalid
.