React Redux Form v1.4.2

Fixes and Enhancements

• Optimizations were made to prevent a load intent from occurring after a dispatched actions.reset. This was initially introduced to ensure that a RESET set the value to its loaded value, if it changed. Because there was no distinction between the loaded and initial value, LOAD was always called as an intent. Now, there's a separation between .loadedValue and .initialValue - if and only if they are different will LOAD be intended. #561
• As a result of the above, the internal .value property in form/field objects has been removed. It is redundant with the model state, and allowed refactoring to simplified code.

React Redux Form v1.4.1

Fixes (just fixes)

• 1.4.0 was affecting Linux builds due to case insensitivity. The lodash.toPath import was incorrect; it should be lodash.topath. This has been fixed, which should resolve Linux builds. #569

React Redux Form v1.4.0

New Component: <Fieldset> 🎉

The <Fieldset> component is a way to contain related fields. This might not sound like much, but it's incredibly useful when creating reusable groups of controls. Here's an example:

// in render():
<Form model="user">
  <Fieldset model=".address">
    <Control.text model=".city" />
    <Control.text model=".state" />
    <Control.text model=".zip" />
  </Fieldset>
</Form>

For more info, check out the docs: http://davidkpiano.github.io/react-redux-form/docs/api/Fieldset.html

No More lodash dependency!

Lodash is a fantastic library, but having to install the entire library for RRF to work is pretty cumbersome. RRF was refactored to only require two important lodash functions: lodash.get and lodash.toPath. This is the magic that makes RRF so easy to implement. So now, only those two functions from lodash will be installed instead of the entire library.

New getDispatch prop for <LocalForm>

This is especially useful if you wanted to manually reset (or any other action) to a <LocalForm>. See #560 for example usage (and this is also in the docs).

<LocalForm
  model="user"
  getDispatch={(dispatch) => this.formDispatch = dispatch}
/>

Fixes and Enhancements

• TypeScript fixes to control props. Thanks, @sl33kr! #563

React Redux Form v1.3.4

Readme updated. Nothing to see here. Silly patch.

Please see the patch notes for v1.3.3 for the most recent updates.

React Redux Form v1.3.3

Fixes and Enhancements

• Any custom keyPress events are now handled properly in <Control>. #559
• TypeScript updates to allow props to pass through <Control> and <Field> onto their rendered components. Thanks @tiagoefmoraes! #552
• Documentation updated to clarify that you can pass your own type to <Control> for <input> controls. Thanks @CoinGame! #558

<Control type="password" model="user.password" />

• ⚠️ Many useful invariant error messages now appear when something has gone awry with your form state. This will better inform (and prevent) those random can not read '$form' of null/undefined cryptic errors.

React Redux Form v1.3.2

New Prop: getRef

Issue #555 pointed out that refs weren't easy to get, so the getRef={() => ...} prop alleviates that. From the FAQs:

---

How do I get the component instance? ref={...} doesn't work.

Use getRef={(node) => ...} in place of ref. This is due to the fact that React treats the ref prop as a "magic" prop that doesn't get propagated down through wrapped components.

You can use getRef on <Field>, <Control>, <Form>, or <LocalForm> components.

(since: version 1.3.2)

<Control.text
  model="user.name"
  getRef={(node) => this.attach(node)}
/>

React Redux Form v1.3.1

Fixes and Enhancements

• A bug was fixed for the actions.remove() thunk action creator where subsequent removals from arrays containing complex values (such as other objects or arrays) no longer had a $form property in their field state. #553
• A regression was found in 1.3.0 where <input type="password" /> fields in <Field> were having their type attribute overwritten to "text"... no bueno. This has been fixed and unit tests now ensure that this will not recur. 👍

React Redux Form v1.3.0

🙅 No more redux-thunk!

This minor version of RRF includes an important change - the peer dependency on redux-thunk has been removed. That means that all built-in functionality with RRF will work as expected, without requiring redux-thunk. This greatly simplifies project setup and allows you to use existing middleware workflows, such as redux-saga and redux-observable, without conflicts.

With that said, many helper actions still require redux-thunk, such as actions.submit, actions.validate, actions.filter, etc. These are all clearly outlined in the action creator docs - most common actions do not require redux-thunk, and all action thunk creators can be reimplemented easily with whatever you're using, whether that's sagas or epics.

See #550.

🆕 The <Control.button> component and disabled={...} superpowers!

There's a new control component for buttons! It defaults to a submit button (as per the HTML5 spec), so you can use mapProps to add any custom RRF-based prop mappings to it based on the model field state.

Also, the <Control.button>, as well as all other controls, now have a special disabled prop that works like the standard disabled prop, but also accepts a:

• function that takes in fieldState
• object as an iteratee
• string as an iteratee

and more. See the docs for more info.

// Disable the submit button when the form is invalid
<Control.button
  model="user"
  disabled={{ valid: false }}
>
  Submit!
</Control.button>

📖 New FAQs page!

I'm going to start adding frequently asked questions in the documentation. Feel free to suggest questions that should be answered there!

🔧 New Redux-Form comparison examples!

I'm also starting to add a bunch of examples ported directly from the Redux-Form examples if you want to make a comparison between the two libraries or migrate easily, or you're just curious. Competition breeds innovation!

Other fixes and enhancements

• <Control.text /> will now explicity set type="text". #551

React Redux Form v1.2.5

Fixes and Enhancements

• 🆕 Deep validators for models in <Form>! You can now do this:

const required = (val) => !!val;

<Form model="user"
  validators={{
    'phones[].number': { required }
  }}
>

and it will validate individual phone numbers whenever that model has changed. See #510 (related PR: #541) for more information.

• Now, dispatching actions.setInitial(...) will no longer affect the model value - its only purpose is to reset the field value to its initial state and has no effect on the model value. #546
• The states of the parent forms will be updated as touched or retouched when one of their fields are touched or retouched. #549
• 🆕 You can now remotely submit a form! Here's how:

// let's say you have a form:
<Form model="user" onSubmit={...}>
  // ... etc.
</Form>

// as long as the form above is currently mounted,
// you can trigger a submit for it anywhere:
dispatch(actions.submit('user'));

That is, if actions.submit('user') is only given the model, it will just trigger validation on the existing <Form>, which can call onSubmit and/or onSubmitFailed, depending on the submission status of the form.

The documentation has been updated to reflect this change.

• 🆕 There is now an onSubmitFailed={...} prop on <Form> (and <LocalForm>, transitively) that handles when a form submission has either failed after an async submit, or if a form submit was attempted with an invalid form state.

Coming Soon
Support for Preact and possibly Inferno!

React Redux Form v1.2.4

Fixes and Enhancements

• There is progress being made on removing redux-thunk as a peer dependency! A related bug involving toggling checkboxes without redux-thunk was fixed: #534
• If a field doesn't exist, RRF will now handle it properly instead of throwing frequent errors. #529
• The latest version of Lodash (as of 4.17.x) introduced some gnarly bugs with _.omit. I replaced it with a much simpler implementation (since it's only being used internally) to mitigate those issues. #535
• Some enhancements were made internally inside <Form> to greatly simplify how validators and error validators are validated, including avoiding unnecessary function calls.
• 🆕 You can now validate individual nested models inside the <Form validators={{...}}> prop! Read the updated docs under the "Deep model validation in <Form>" section. Here's what it looks like:

// Suppose you have a store with this 'user' model:
// {
//   name: 'Bob',
//   phones: [
//     { type: 'home', number: '5551231234' },
//     { type: 'cell', number: '5550980987' },
//   ],
// }

// You can validate each individual phone number like so:
<Form
  model="user"
  validators={{
    'phones[].number': (value) => value && value.length === 10,
  }}
>
  {/* etc. */}
</Form>