props

View source on GitHub

The props listed on this page are the props that redux-form generates to give to your decorated form component. The props that you pass into your wrapped component are listed here.

If you are a strict PropTypes completionist, redux-form exports all of these propTypes, 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 as touched, false otherwise.

array : Object

A set of pre-bound action creators for you to operate on array fields in your form.

array.insert(field:String, index:Number, value:Any) : Function

Inserts a value into the given array field in your form. This is a bound action creator, so it returns nothing.

array.move(field:String, from:Number, to:Number) : Function

Moves a value at the given from index to the given to index in the given array field in your form. This is a bound action creator, so it returns nothing.

array.pop(field:String) : Function

Pops a value off of the end of a given array field in your form. This is a bound action creator, so it returns nothing.

array.push(field:String, value:Any) : Function

Pushes the given value onto the end of the given array field in your form. This is a bound action creator, so it returns nothing.

array.remove(field:String, index:Number) : Function

Removes a value at the given index from the given array field in your form. This is a bound action creator, so it returns nothing.

array.removeAll(field:String) : Function

Removes all the values from the given array field in your form. This is a bound action creator, so it returns nothing.

array.shift(field:String) : Function

Shifts a value out of the beginning of the given array in your form. This is a bound action creator, so it returns nothing.

array.splice(field:String, index:Number, removeNum:Number, value:Any) : Function

Performs an Array.splice operation on the given array in your form. This is a bound action creator, so it returns nothing.

array.swap(field:String, indexA:Number, indexB:Number) : Function

Swaps two values at the given indexes of the given array field in your form. This is a bound action creator, so it returns nothing.

array.unshift(field:String, value:Any) : Function

Unshifts the given value into the beginning of the given array field in your form. This is a bound action creator, so it returns nothing.

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 happening
• true - 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

autofill(field:String, value:any) : Function

Sets the value and marks the field as autofilled in the Redux Store. This is useful when a field needs to be set programmatically, but in a way that lets the user know (via a styling change using the autofilled prop in Field) that it has been autofilled for them programmatically. This is a bound action creator, so it returns nothing.

blur(field:String, value:any) : Function

Marks a field as blurred in the Redux store. This is a bound action creator, so it returns nothing.

change(field:String, value:any) : Function

Changes the value of a field in the Redux store. This is a bound action creator, so it returns nothing.

clearAsyncError(field:String) : Function

Clear async error of a field in the Redux store. This is a bound action creator, so it returns nothing.

destroy() : Function

Destroys the form state in the Redux store. By default, this will be called for you in componentWillUnmount(). This is a bound action creator, so it returns nothing.

dirty : boolean

true if the form data has changed from its initialized values. Opposite of pristine.

error : any

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 from onSubmit.

form : String

The form name that you gave to the reduxForm() decorator or the prop you passed in to your decorated form component.

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 call this.props.onSubmit(data) with the contents of the form data.

Optionally, you may also pass your onSubmit function to handleSubmit which will take the place of the onSubmit prop. For example: <form onSubmit={handleSubmit(this.save.bind(this))}>

If your onSubmit function returns a promise, the submitting property will be set to true until the promise has been resolved or rejected. If it is rejected with an object like new SubmissionError({ field1: 'error', field2: 'error' }) then the submission errors will be added to each field (to the error 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 the error prop.

To recap, there are two ways to use handleSubmit:

1. pass it a function to call

<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>

2. pass in such a function as the onSubmit prop to your decorated component

<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 and pristine state will be determined by comparing the current data with these initialized values. This is a bound action creator, so it returns nothing.

initialized : boolean

true the form has been initialized with initial values, false otherwise.

initialValues : Object

The same initialValues object passed to reduxForm to initialize the form data.

invalid : boolean

true if the form has validation errors. Opposite of valid.

pristine: boolean

true if the form data is the same as its initialized values. Opposite of dirty.

reset() : Function

Resets all the values in the form to the initialized state, making it pristine again. This is a bound action creator, so it returns nothing.

submitFailed : boolean

Starts as false. If onSubmit is called, and fails to submit for any reason, submitFailed will be set to true. A subsequent successful submit will set it back to false.

submitSucceeded : boolean

Starts as false. If onSubmit is called, and succeed to submit , submitSucceeded will be set to true. A subsequent unsuccessful submit will set it back to false.

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 be true until the promise is resolved or rejected.

touch(...field:string) : Function

Marks the given fields as "touched" to show errors. This is a bound action creator, so it returns nothing.

untouch(...field:string) : Function

Clears the "touched" flag for the given fields This is a bound action creator, so it returns nothing.

valid : boolean

true if the form passes validation (has no validation errors). Opposite of invalid.

warning : any

A generic warning for the entire form given by the _warning key in the result from the synchronous warning function.