Behaviors Overview

Behaviors add reactive logic to forms: computed fields, conditional visibility, field synchronization.

What Are Behaviors?

Behaviors automatically react to form changes:

import { GroupNode } from '@reformer/core';
import { computeFrom, enableWhen } from '@reformer/core/behaviors';

const form = new GroupNode({
  form: {
    price: { value: 100 },
    quantity: { value: 1 },
    total: { value: 0 },
    discount: { value: 0 },
    showDiscount: { value: false },
  },
  behavior: (path) => {
    // Auto-compute total
    computeFrom([path.price, path.quantity], path.total, ({ price, quantity }) => price * quantity);

    // Enable discount field conditionally
    enableWhen(path.discount, (form) => form.total > 500);
  },
});

Available Behaviors

Behavior	Description
computeFrom	Calculate field from other fields
transformValue	Transform value on change
enableWhen	Conditional enable/disable
resetWhen	Reset field on condition
copyFrom	Copy value from another field
syncFields	Two-way synchronization
watchField	React to field changes
revalidateWhen	Trigger revalidation

How Behaviors Work

1. Define in behavior
2. ReFormer sets up reactive subscriptions
3. When source fields change, behavior runs automatically

// When price or quantity changes → total updates
computeFrom(
  [path.price, path.quantity], // Watch these
  path.total, // Update this
  ({ price, quantity }) => price * quantity // With this function
);

Behavior vs Validation

Aspect	Validation	Behavior
Purpose	Check correctness	React to changes
Output	Errors	Side effects
Examples	Required, email format	Computed total, show/hide

Next Steps

• Computed Fields — computeFrom, transformValue
• Conditional Logic — enableWhen, resetWhen
• Field Sync — copyFrom, syncFields