easy-forms
Dynamic forms

valueDependsOn

Derive a field's value from the values of other fields.

valueDependsOn computes a target field's value from its source fields. The derivation runs on a microtask and is written with markDirty: false, so derived writes never flip the form's isDirty flag.

interface ValueDependency<TFormData> {
	fieldNames: readonly (keyof TFormData)[];
	compute: (values: Pick<TFormData, ...>) => TValue;
}

Example: a live total

Edit subtotal or tax rate — the read-only total recomputes immediately.

Preview
Live
$
%
$
{
	key: 'total',
	label: 'Total',
	control: 'number',
	prefix: '$',
	readOnly: true,
	dependents: {
		valueDependsOn: {
			fieldNames: ['subtotal', 'taxRate'],
			compute: (v) => Number(((v.subtotal ?? 0) * (1 + (v.taxRate ?? 0) / 100)).toFixed(2)),
		},
	},
}

Mark derived fields readOnly: true so users don't fight the computation. Because derived writes use markDirty: false, the form won't appear dirty just from a recompute.

Good uses

  • Totals, subtotals, and tax.
  • Slugs derived from a title.
  • A full name assembled from first + last.
  • A normalized value mirrored from a raw input.