Dependent Fields

A DependentField is as Field that depends on other values in the form. React Formz has first class support for dependent fields right out of the box.

Dependent fields are useful for validating fields against each other or changing a fields value based on the value of another field. So, for example let's say you want to set a checkbox to true whenever the value in the date of birth field is greater than or equal to 21. You would use a dependent field for that.

Dependent fields utilize the selector pattern to allow you to select which fields your component will subscribe to. Re-renders are optimized to only occur when its' value changes or when one of its' dependencies changes. You will pass in a dependencies selector that will extract the dependencies out of the form state. Those dependencies can then be used in validation or to change the value of the field.

<TextField name="dob" />
<DependentField 
  name="favoriteDrink"
  dependencies={(values) => ({ dob: values.dob })} 
  validate={(_, { dob }) => {
    if (dob <= 21) {
      return "Must be 21 years old"
    }
  }} 
  onDependenciesChange={(dependencies, actions) => {
    if (dependencies.dob <= 21) {
      actions.setValue("N/A");
    }
  }}
/>