Dependent Fields

[tyteen4a03]

I only want to show field2 if field1 (which is a <select> field) has a value.

How can I do this with remix-validated-form?

[airjp73]

You can use useControlField to track the value of field1 and conditionally render field2 as you normally would.

[tyteen4a03]

Do you have an example? Mine is not working (it's not updating or triggering my debugger breakpoints when selected).

import { useControlField, useField, useFormContext } from 'remix-validated-form';
import SelectField from '~/components/forms/SelectField';

const DurationSelectField = () => {
    const [type] = useControlField<string>('type');

    if (!type) {
        return null;
    }

    return (
        <SelectField name="duration" label="Duration">
            ...etc
        </SelectField>
    );
};

export default DurationSelectField;

SelectField:

import { useField } from 'remix-validated-form';
import type { SelectProps } from '@chakra-ui/react';
import { Alert, FormControl, FormLabel, Select } from '@chakra-ui/react';
import type { ReactNode } from 'react';

type SelectFieldProps = {
    name: string;
    label: string;
    children: ReactNode;
};

const SelectField = ({ name, label, children }: SelectFieldProps) => {
    const { error, getInputProps } = useField(name);

    return (
        <FormControl>
            <FormLabel htmlFor={name}>{label}</FormLabel>
            <Select {...getInputProps<SelectProps>({ id: name })}>{children}</Select>
            {error && <Alert colorScheme="red">{error}</Alert>}
        </FormControl>
    );
};

export default SelectField;

[airjp73]

useControlField is analogous to useState, but for form values. In order for the value to update, you need to set the value when the "type" field changes. I only see the code here for the field you want to conditionally render, so I'm guessing that's the missing piece.

Your use-case is probably closest to the "occasional field tracking" example in the doc I linked. But you may also opt to integrate useControlField directly into your SelectField component like the "globally tracking" example.

[tyteen4a03]

So if I understand correctly, the field that is being listened to (in this case, type) is responsible for triggering the value update event?

[airjp73]

Kinda, yeah.

You have to update the value in response to a change event, but that doesn't have to be in a field component. The occasional field tracking example shows you can put it at the form level like you would when hoisting state with useState.

Here's a tweaked example that also shows the conditional rendering.

export const MyForm = () => {
  const [value, setValue] = useControlField(
    "myField",
    "myForm"
  );

  useEffect(() => {
    // Now we can update the value of the field
    // for whatever reason we need.
    setValue("Some value");
  });

  return (
    <ValidatedForm validator={myValidator} id="myForm">
      <MyInput
        name="myField"
        // This assumes your input component
        // has a `value` and `onChange` prop
        value={value}
        onChange={(e) => setValue(e.target.value)}
      />

      {!!value && <ConditionalField />}
    </ValidatedForm>
  );
};