Transforming Field Values

[genovese]

I'm using Formik to build up a hierarchical data structure dynamically, with components that are contingent on user choices and input. The form is similarly hierarchical and dynamic and matches the underlying structure as both are built. This works pretty well, but it is somewhat rigid. For instance, if I want to support input of different types of data at the same point in the structure, I need fields that reach into different parts of an object in the structure. But coordinating these changes is challenging.

What I'd like to have (for any given field/widget) is a transformation between the data in the field and the value stored in the field state. That is, I'd like to be able to specify a function f and its inverse g, so that values[field-path] equals f(entered input) and that the displayed/edited input equals g(values[field-path]) automatically. (Ideally, these functions would take parameters associated with the component as well.)

Reading this, I see that it is a bit abstract, so let me try to sketch a schematic example. Imagine that at some point in the form, the data looks like a nested array [..., [..., [..., [Y, ..., X]], ...]] corresponding to several nested field arrays, where X is the field we are currently on. At that point, the user can enter either a date, select a previous 'record' to reference, or put in some associated numeric data. The user selects a choice based on some nearby input field (corresponding to Y in the data structure) and is then presented with an appropriate input element. Because the input has to be attached to a specific field path, I need to store the input data and typically some additional information. Here's where the wrapping functions f and g come in. If it's a Date, we'd like to store some suitably wrapped date in the field; if a reference, an object with the reference and related information, etc... The wrapping function f would take the input from each widget and store it as an object at X with props indicating the type and related data; the unwrapping function would pull out the data appropriate to the chosen input widget and make that the value displayed and edited by the user. Having completely separate fields for each choice doesn't work great because we want the values data to represent the actually constructed data; storing an object in the field is limited without the ability to also store associated information. (Related to the latter I tried using hidden fields in the form, but these do not seem to work at all, which is a separate question for later.)

How would this best be done with Formik?

In any case, I hope I'm being clear, and if not, let me know how I can clarify. I'd appreciate any ideas or any possibilities that I've missed.

Thanks, and thanks for Formik; it is really terrific.

[genovese]

To further clarify, here's the kind of thing I'm trying. I'm thinking that this pattern can be packaged into a WrappingField component fairly easily:

export const wrappingChangeHandler = (fieldValue, {setValue}) =>
      (wrap, unwrap) => React.useCallback(
          (event) => {
              event?.persist();
              const target = event.target || event.currentTarget;
              const {
                  type,
                  name,
                  id,
                  value,
                  checked,
                  outerHTML,
                  options,
                  multiple,
              } = target;

              const field = name ? name : id;

              if( field ) {
                  let parsed;
                  const val = /number|range/.test(type)
                        ? ((parsed = parseFloat(value)), isNaN(parsed) ? '' : parsed)
                        : /checkbox/.test(type) // checkboxes
                        ? getValueForCheckbox(unwrap(fieldValue), checked, value)
                        : options && multiple   // <select multiple>
                        ? getSelectedValues(options)
                        : value;
                  setValue(wrap(val));
              }
          },
          [setValue, fieldValue, wrap, unwrap]
      );


const ExampleComponent = ({name, ...props}) => {
    const [field, meta, helpers] = useField(name),
          makeChangeHandler = wrappingChangeHandler(field, helpers);

    //...in principle, there could be different wrappers across children
    
    const [wrap, unwrap] = useContext(WrappingContext); // ...for instance
    const handleChange = makeChangeHandler(wrap, unwrap);
    const input_field = {...field,
                         ...(field.value ?? {value: unwrap(field.value)}),
                         onChange: handleChange};

    return (<input {...input_field} {...props}/> );
};

where I've borrowed liberally from Formik here (getValueForCheckbox, getSelectedValues, and the change handler).

For WrappingField I would mimic Field but insert this pattern.

How does this look? Is there an easier approach?
Thanks

[genovese]

And here's a rough sketch of what WrappingField might look like. It takes an extra prop wrappers={[f, g]}.

export function WrappingField({
    name,
    wrappers,
    as,
    children,
    component,
    render,
    validate,
    ...props
}) {
    const {
        validate: _validate,
        validationSchema: _validationSchema,
        ...formik
    } = useFormikContext();

    // Register field and field-level validation with parent <Formik>
    const { registerField, unregisterField } = formik;

    useEffect(() => {
        registerField(name, { validate: validate, });
        return () => { 
            unregisterField(name);
        };
    }, [registerField, unregisterField, name, validate]);


    const [wrap, unwrap] = wrappers,
          field = formik.getFieldProps({ name, ...props }),
          meta = formik.getFieldMeta(name),
          helpers = formik.getFieldHelpers(name),
          handleChange = wrappingChangeHandler(field, helpers)(wrap, unwrap),
          input_field = { // view as seen by the input element
              ...field,
              ...(field.value ?? { value: unwrap(field.value) }),
              onChange: handleChange,
          },
          legacyBag = { field: input_field, form: formik };

    if (render) {
        return render({ ...legacyBag, meta });
    }

    if (isFunction(children)) {
        return children({ ...legacyBag, meta });
    }

    if (component) {
        // This behavior is backwards compat with earlier Formik 0.9 to 1.x
        if (typeof component === 'string') {
            const { innerRef, ...rest } = props;
            return React.createElement(
                component,
                { ref: innerRef, ...input_field, ...rest },
                children
            );
        }
        // We don't pass `meta` for backwards compat
        return React.createElement(
            component,
            { field: input_field, form: formik, ...props },
            children
        );
    }

    // default to input here so we can check for both `as` and `children` above
    const asElement = as || 'input';

    if (typeof asElement === 'string') {
        const { innerRef, ...rest } = props;
        return React.createElement(
            asElement,
            { ref: innerRef, ...input_field, ...rest },
            children
        );
    }

    return React.createElement(asElement, { ...input_field, ...props }, children);
}

It does feel wasteful to have to mimic so much of the existing structure though...

[johnrom]

Formik v3 will have parse and format props. You can test them out using version formik@next. I think they let you do exactly what you're requesting.

Here you would do

return <Field parse={unwrap} format={wrap} />

[genovese]

That's terrific news, and a great feature addition. Thanks! I'll definitely take a look at formik@next.

For what it's worth, my implementation based on the sketch above is working quite well, too.

[johnrom]

They are almost exactly the same! One thing to note if you switch to next is that the parse prop you pass actually replaces Formik's default parse function, which you pretty much have here:

const defaultParseFn = (value: unknown) => /number|range/.test(type)
                        ? ((parsed = parseFloat(value)), isNaN(parsed) ? '' : parsed)
                        : /checkbox/.test(type) // checkboxes
                        ? getValueForCheckbox(fieldValue, checked, value)
                        : options && multiple   // <select multiple>
                        ? getSelectedValues(options)
                        : value;

const handleChange = (event) => setFieldValue(props.name, (props.parse ?? defaultParseFn)(event.target.value));