🏁 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
// Create Formconst form = // Create Decoratorconst decorator = // Decorate formconst undecorate = // Use form as normal
Table of Contents
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, 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 | RegExp)[]
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.