React Redux Form v0.10.3

New (Exposed) Actions

• setFieldsValidity(model, fieldsValidity) - previously internal, this action allows you to set the validity for multiple submodels of a model at the same time.
• setFieldsErrors(model, fieldsErrors) - like setFieldsValidity, but for setting multiple errors of submodels of a model.
• validateErrorsFields(model, fieldsErrorsValidators, [options]) - runs error validation on each of the error validators for each submodel of a model. See #142 for more details.

v0.10.2

Enhancements and Fixes

• The <Form> component can now take a custom component={...} prop if you want to render the form as anything other than <form> (default). It accepts both strings and components (function or class). Thanks @asvetliakov: #140
• PropType warnings for the <Errors> component should now be fixed.

Regressions

• The "pruning" of fields in the formReducer introduced in v9 has been causing some weird edge-case issues, so it has been removed. It is now recommended to use track(...) instead of referencing a field that might change/disappear over time. Docs to come soon.

React Redux Form v0.10.0

🆕 The <Errors> Component

From #124, the <Errors> component is now available in RRF to make displaying errors even easier. Even for the simplest cases, displaying error messages can get pretty verbose, and <Errors> greatly simplifies this:

// Before...
<div>
{ userForm.fields.email.touched
  && userForm.fields.email.errors.isRequired
  && <span>Email address is required</span>
}

// ... etc. for other errors
</div>

// After...
<Errors model="user.email"
  messages={{
    isRequired: 'Email address is required',
    isEmail: 'Must be a valid email address',
  }}
  show="touched"
/>

This will render the following HTML, depending on what the errors are:

<div>
  <span>Email address is required</span>
  <span>Must be a valid email address</span>
</div>

The full spec:

<Errors
  model="user.email" // string or model getter function, just like Field
  messages={{...}} // map - <validation key>: <message or function> (string or JSX)
  show="touched" // string or object or function that takes field object as arg.
  wrapper="div" // string or component class for container
  component="span" // string or component class for each child error
/>

🆕 Model Getters with track()

The new track(model, predicate) function returns a function that, when called with state, will return the first full model string (with the sub-model) that matches the predicate iteratee.

For example:

const team = {
  users: [
    { name: 'Alice' },
    { name: 'Bob' }
  ]
};

const isBob = (item) => item.name === 'Bob';

track('users', isBob)(users);
// => 'users.1'

Also, you can use lodash iteratee shorthands as the predicate! So the above can be shortened:

track('users', {name: 'Alice'})(users);
// => 'users.0'

track() and <Field> 🏃

How is track() useful? Now, the <Field model={...}> property accepts two types:

• a string, such as model="users.1"
• a model getter, such as model={track('users', isBob)}, which is called with the state returned by store.getState().

Why is this beneficial? If the model you want to track is part of a collection that changes over time, such as by adding/removing items, shuffling, sorting, etc., the model itself will also change over time. That means that users.0 might be users.3 after rearranging, for example.

// This will ALWAYS reference the model where the user.id === 10
<Field model={track('users[].name', {id: 10})}>
  <input type="text" />
</Field>

track() and Model Getter Support

Model Getters are supported in all of these components:

• <Field model={...}>
• <Form model={...}>
• <Errors model={...}>

React Redux Form v0.9.14

Dependencies

• Bumped lodash to 4.10.0

Planned Simplification

• Started deprecation of actions.setErrors(). Instead, this will be merged with actions.setValidity(model, validators, { errors: true }), where the third argument is for options.
• The <Field updateOn="..."> prop will no longer accept functions in v1.0. It will expect strings such as "change", "blur", "focus", etc.
  • To get similar behavior of customizing change behavior with a function, use the changeAction={...} prop.

Planned Enhancements

• The upcoming <Control> component (which is just a lower-level abstraction for controls inside <Field>) will soon support onLoad and onSubmit event handlers.

Fixed Bugs

• The Uncaught TypeError: Cannot read property 'valid' of undefined on <Form> components without a corresponding form reducer has been fixed. #117 #139
  • This means that you are not required to have a formReducer when using <Form>.

React Redux Form v0.9.13

Actions and Action Type Updates

• Removed the actionTypes.LOAD action type
  • this is equivalent to actionTypes.CHANGE with { silent: true }
• Refactored actions.load to trigger a CHANGE action (see above)
• 🆕 actions.omit(model, props): https://davidkpiano.gitbooks.io/react-redux-form/content/model_actions.html#actionsomitmodel-props

React Redux Form v0.9.12

• The .npmignore file now ignores .babelrc and other unnecessary files, especially to fix React Native issues.
• Peer dependencies updated to allow for react@15.
• The <Field model="..."> prop now also supports functions that take the state as an argument and return a string model.
  • This is especially useful for the new track(...) function, also introduced in this version (stable, but still being developed)
  • This will be developed further with official usage notes in v0.10.0
• The createFieldClass function now takes defaultProps as its second argument.
  • This is used to fix the React Native issue of wrongly using a wrapper div instead of a wrapper View.
• All tests pass with React v15, and more enhancements are coming to ensure full support (and no warnings/deprecations) of React v15 and <= v0.14 in React-Redux-Form v1.0!

v0.9.10

Action Creator Enhancements

• The validateFields action creator now accepts a 4th argument, invalidCallback, that will be called when validation does not pass after validating all fields.

<Form> Enhancements

• The submitFailed form property will be set to true if submit is called but validation fails.
• Deep state paths are now supported for the model="..." property, thanks to @ataube!

v0.9.8

• Removed deprecation warnings for the following field attributes that will be deprecated:
  • blur
  • dirty
  • untouched

React Redux Form v0.9.6

New Actions

• actions.setSubmitFailed(model) - Sets the .submitFailed property of the field/form component to true.

New Action Behavior

• actions.submit(...) will now dispatch actions.setSubmitFailed(...) upon a promise failure. The state behavior is maintained with regard to pending and submitted, with the addition of submitFailed being set to true.

Field Component Enhancements

• Now it's possible to add custom event handlers directly on the onChange, onFocus, and onBlur props of controls inside of <Field>, which will be called before any other RRF-specific action is dispatched:

// Will alert "I am changed!" and then proceed with dispatching
// a change action for foo.bar.
<Field model="foo.bar">
  <input type="text" onChange={() => alert('I am changed!')} />
</Field>

Form Reducer Deprecation Warnings

The following redundant field/form properties will be deprecated as of v1.0:

• blur - use the inverse of focus instead
• dirty - use the inverse of pristine instead
• untouched - use the inverse of touched instead

When getting these properties, a deprecation warning will appear in the console. These are deprecated in favor of the positive counterparts, and will improve performance slightly as the field/form objects become less property-heavy.

React Redux Form v0.9.4

New Actions

• actions.batch - mostly internal, this action allows multiple actions or action thunks to be batched into a single action that is understood by both the model and form reducer. This is a performance enhancement that can prevent multiple renders from occurring in the UI.
• actions.validateFields - explicit action created for validating fields of a form. Takes in three arguments:
  • model - the model to validate
  • fieldValidators - an object where the keys are the field paths (such as "email" for user.email), and the values are validators (either functions or a validation object)
  • callback (optional) - a callback that is executed if the model is valid.
• actions.move - model action that allows you to move an item in an array from index A to index B. Takes in three arguments:
  • model - the array to manipulate
  • fromIndex
  • toIndex
• actions.load - similar to actions.change, but changes the model without triggering a "change" in the form reducer. Good for initializing values dynamically/asynchronously. Takes in two arguments:
  • model
  • value

Field Fixes and Improvements

• Now, pressing the Enter key in a control inside of a <Field> will trigger a change before submitting the form. This is useful if you press Enter inside of an updateOn="blur" field.
• The actual updated model values are now passed into <Field> validators instead of the event value.

Form Fixes and Improvements

• Now, the actual form state will be used for checking if a <Form> is valid. This means that any validator can be used to update the validation state inside <Form>, which prevents onSubmit if the form is invalid. This includes:
  • validators inside <Field>
  • validators dispatched from actions