final-form-calculate

🏁 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

npm install --save final-form-calculate

or

yarn add final-form-calculate

Usage

import { createForm } 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: /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)
    }
  }
)

// Decorate form
const undecorate = decorator(form)

// Use form as normal

Table of Contents

• Example
  • Calculated Fields Example
• API
  • createDecorator: (...calculations: Calculation[]) => Decorator
• Types
  • Calculation: { field: FieldPattern, updates: Updates }
  • FieldName: string
  • FieldPattern: FieldName | RegExp
  • Updates: { [FieldName]: (value: any, allValues: Object) => any }

Example

Calculated Fields Example

Example using 🏁 React Final Form.

API

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

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

Types

Calculation: { field: FieldPattern, updates: Updates }

A calculation to perform

FieldName: string

FieldPattern: FieldName | RegExp

A pattern to match a field with.

Updates: { [FieldName]: (value: any, allValues: Object) => any }

Updates to make on other fields.