Skip to main content

Field Synchronization

Copy values between fields or keep fields in sync.

copyFrom​

Copy value from source to target field.

import { copyFrom } from '@reformer/core/behaviors';

behaviors: (path, ctx) => [copyFrom(path.email, path.username)];

Example: Same Address​

const form = new GroupNode({
  form: {
    billingAddress: {
      street: { value: '' },
      city: { value: '' },
    },
    shippingAddress: {
      street: { value: '' },
      city: { value: '' },
    },
    sameAsBilling: { value: false },
  },
  behaviors: (path, ctx) => [
    // Only copy when checkbox is checked
    copyFrom(path.billingAddress.street, path.shippingAddress.street, {
      when: () => form.controls.sameAsBilling.value,
    }),
    copyFrom(path.billingAddress.city, path.shippingAddress.city, {
      when: () => form.controls.sameAsBilling.value,
    }),
  ],
});

Example: Initial Value​

behaviors: (path, ctx) => [
  // Copy only once, on initial load
  copyFrom(path.defaultEmail, path.email, { once: true }),
];

syncFields​

Two-way synchronization between fields.

import { syncFields } from '@reformer/core/behaviors';

behaviors: (path, ctx) => [syncFields(path.displayName, path.username)];

When either field changes, the other updates:

form.controls.displayName.setValue('john');
form.controls.username.value; // 'john'

form.controls.username.setValue('jane');
form.controls.displayName.value; // 'jane'

Example: Bidirectional Conversion​

const form = new GroupNode({
  form: {
    celsius: { value: 0 },
    fahrenheit: { value: 32 },
  },
  behaviors: (path, ctx) => [
    syncFields(path.celsius, path.fahrenheit, {
      toTarget: (c) => (c * 9) / 5 + 32,
      toSource: (f) => ((f - 32) * 5) / 9,
    }),
  ],
});

form.controls.celsius.setValue(100);
form.controls.fahrenheit.value; // 212

form.controls.fahrenheit.setValue(68);
form.controls.celsius.value; // 20

Conditional Copy​

Copy with transformation:

behaviors: (path, ctx) => [
  copyFrom(path.firstName, path.initials, {
    transform: (firstName) => {
      const lastName = form.controls.lastName.value;
      return `${firstName[0]}${lastName[0]}`.toUpperCase();
    },
  }),
];

Array Field Copy​

Copy array values:

const form = new GroupNode({
  form: {
    templateEmails: [{ value: 'admin@example.com' }, { value: 'support@example.com' }],
    recipientEmails: [],
    useTemplate: { value: false },
  },
  behaviors: (path, ctx) => [
    copyFrom(path.templateEmails, path.recipientEmails, {
      when: () => form.controls.useTemplate.value,
    }),
  ],
});

Next Steps​