Dynamically Update one field based on another field

[austinh]

How would someone dynamically update one field based on the value of another? lets say I have a json schema like this:

{
  "type": "object",
  "properties": {
    "valueA": {
      "type": "number"
    },
    "valueB": {
      "type": "number"
    },
    "title": {
      "type": "string"
    },
  }
}

If the user changes valueA to be 2 I want to update valueB to be twice as much as valueA (so valueB is valueA * 2). However, the user could still modify valueB after the fact. It would be a nice helper based on some selections the user picks.

Another example of this is having an autocomplete dropdown from google maps dropdown to select an address and fill in other fields that exist later in the form (shipping zip code for example)

How would I accomplish this?

[kestarumper]

Hi @austinh,

Reacting to field changes

If the user changes valueA to be 2 I want to update valueB to be twice as much as valueA (so valueB is valueA * 2). However, the user could still modify valueB after the fact. It would be a nice helper based on some selections the user picks.

There are a few approaches to this, but there is one limitation for sure - you can't achieve this using schema only. This needs to be handled in the implementation. Let's review a few possibilities that we have:

Overriding AutoForm.onChange - from the form perspective

You can override the onChange by extending the AutoForm class and reacting to particular field key changes.

With custom field(s) (useField twice) - from the perspective of a field

The useField hook can be used as many times as you need inside a single component. This means that you can read and write from/to many fields from a single component. You could use that to connect two fields altogether.

const fieldA = useField('fieldA', props)
const fieldB = useField('fieldB', props)

const onChangeFieldA = value => {
    fieldA.onChange(value)
    fieldB.onChange(value * 2)
}

const onChangeFieldB = value => {
    fieldA.onChange(value / 2)
    fieldB.onChange(value)
}

Using AutoForm.onModelChange and useForm.

You can hook into the onModelChange function and react to model changes and write to it using useForm. Although I would personally advise sticking with AutoForm.onChange but it depends on your use case.

---

Handling custom fields

Another example of this has an autocomplete dropdown from google maps dropdown to select an address and fill in other fields that exist later in the form (shipping zip code, for example)

My personal approach to this would be to go with either useForm to be able to alter any field by form.onChange(name, value) or by using several useField(s) inside a single component that sets the values for others.

const form = useForm()

<GoogleMapDropdown
    onChange={address => {
        form.onChange('address.city', address.city)
        form.onChange('address.street', address.street)
    }}
/>

Which approach to choose?

It depends. The main difference is who holds responsibility for changing the values (who handles the logic) - should it be the field (component) itself, or should it be the almighty form.

Hope that helps, for examples please refer to the docs but also feel free to ask more questions here.