🏁 Final Form Calculate


Decorator for 🏁 Final Form that
allows you to define calculations that happen between fields, i.e. "When field X
changes, update field Y."

---

Installation

``bash
npm install --save final-form-calculate
`

or

`bash
yarn add final-form-calculate
`

Usage

`js
import { createForm, getIn } from 'final-form'
import createDecorator from 'final-form-calculate'

// Create Form
const form = createForm({ onSubmit })

// Create Decorator
const decorator = createDecorator(
// Calculations:
{
field: 'foo', // when the value of foo changes...
updates: {
// ...set field "doubleFoo" to twice the value of foo
doubleFoo: (fooValue, allValues) => fooValue * 2
}
},
{
field: 'bar', // when the value of bar changes...
updates: {
// ...set field "foo" to previous value of bar
foo: (fooValue, allValues, prevValues) => prevValues.bar
}
},
{
field: /items\[\d+\]/, // when a field matching this pattern changes...
updates: {
// ...sets field "total" to the sum of all items
total: (itemValue, allValues) =>
(allValues.items || []).reduce((sum, value) => sum + value, 0)
}
},
{
field: 'foo', // when the value of foo changes...
updates: {
// ...asynchronously set field "doubleFoo" to twice the value using a promise
doubleFoo: (fooValue, allValues) =>
new Promise(resolve => {
setTimeout(() => resolve(fooValue * 2), 100)
})
}
},
{
field: /\.timeFrom/, // when a deeper field matching this pattern changes...
updates: (value, name, allValues) => {
const toField = name.replace('timeFrom', 'timeTo')
const toValue = getIn(allValues, toField)
if (toValue && value > toValue) {
return {
[toField]: value
}
}

return {}
}
}
)

// Decorate form
const undecorate = decorator(form)

// Use form as normal
`

Table of Contents

- Example
- Calculated Fields Example
- API
- [createDecorator: (...calculations: Calculation[]) => Decorator](#createdecorator-calculations-calculation--decorator)
- Types
- Calculation: { field: FieldPattern, updates: Updates }
- FieldName: string
- FieldPattern: FieldName | RegExp
- [Updates: { [FieldName]: (value: any, allValues: Object, prevValues: Object) => any }](#updates--fieldname-value-any-allvalues-object--any-)

Example

$3

Example using
🏁 React Final Form.

API

$3

A function that takes a set of calculations and returns a 🏁 Final Form
Decorator.

Types

$3

A calculation to perform, with an optional isEqual predicate to determine if a value has really changed (defaults to ===`).

$3

$3

A pattern to match a field with.

$3

Either an object of updater functions or a function that generates updates for multiple fields.

$3

Updater functions for each calculated field.

$3

Takes the value and name of the field that just changed, as well as all the values, and returns an object of fields and new values.