Skip to content
Decorator for calculating field values based on other field values in 🏁 Final Form
Branch: master
Clone or download
Latest commit 320e7fe Feb 7, 2019
Type Name Latest commit message Commit time
Failed to load latest commit information.
.github Initial commit Dec 8, 2017
src Add support for RegExp in calculatoin field definition (#21) Dec 13, 2018
.flowconfig Added types and docs for new multi-update api (#9) Mar 20, 2018
LICENSE Initial commit Dec 8, 2017 Add previous values to updates function (#24) Dec 13, 2018
package-scripts.js Copying typescript definition file to dist folder (#13) Apr 11, 2018
tsconfig.json Add typescript definition file and test (#12) Apr 11, 2018

🏁 Final Form Calculate

NPM Version NPM Downloads Build Status styled with prettier

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


npm install --save final-form-calculate


yarn add final-form-calculate


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


Calculated Fields Example

Example using 🏁 React Final Form.


createDecorator: (...calculations: Calculation[]) => Decorator

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


Calculation: { field: FieldPattern, isEqual?: (any, any) => boolean, updates: Updates }

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

FieldName: string

FieldPattern: FieldName | RegExp | FieldName[]

A pattern to match a field with.

Updates: UpdatesByName | UpdatesForAll

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

UpdatesByName: { [FieldName]: (value: any, allValues: Object, prevValues: Object) => Promise | any }

Updater functions for each calculated field.

UpdatesForAll: (value: any, field: string, allValues: Object, prevValues: Object) => Promise | { [FieldName]: any }

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.

You can’t perform that action at this time.