Form values organized by step and pre-populating related fields?

[lscmaro]

Is there a way to have Formiz separate out the form values, step by step and pre-populate related fields in another step with previous step form values?

I have a Codesandbox where I'm trying to pre-populate but can't seem to get it. And also seem to be having issues with Radio options setting and updating correctly (Which is likely my lack of React skills)

[lscmaro]

Wow .. Organizing by step is as simple as dot notation! Love it.
<MyField name='step_one.firstname' label='First Name' />
<MyField name='step_one.lastname' label='Last Name' />

[ivan-dalmet]

Is it all good or do you still need help? ^^

[lscmaro]

Yea, I'm still having issues with pre-populating field values. Strings work just fine for defaultValue , but trying to use previously entered input from the form is my issue. Radio selections are all good now so that's a plus. Thanks for making this simple, cool plugin too 👍

[ivan-dalmet]

@lscmaro You can handle this use case with a custom hook like this:

import { useEffect } from "react";
import { useForm } from "@formiz/core";
import get from "lodash/get";

export const useDependentField = (fieldNameOrigin, fieldNameDestination) => {
  const { setFieldsValues, values, fields } = useForm({ subscribe: { fields: [fieldNameOrigin, fieldNameDestination] } });
  const fieldOriginValue = get(values, fieldNameOrigin);  // Needs Lodash here to handle nested fields names
  const fieldDestinationPristine = get(fields, fieldNameDestination)?.isPristine;  // Needs Lodash here to handle nested fields names

  useEffect(() => {
    // Update only if the destination field is pristine
    if (fieldDestinationPristine) {
      setFieldsValues({ [fieldNameDestination]: fieldOriginValue });
    }
  }, [
    setFieldsValues,
    fieldNameDestination,
    fieldOriginValue,
    fieldDestinationPristine
  ]);
};

And then you can use it like that:

export const StepOne = (props) => {
  const { formWizard } = props;

  useDependentField("customer_info.firstname", "ship_info.firstname");
  useDependentField("customer_info.lastname", "ship_info.lastname");

  return (
    <div className={`step-one ${formWizard.currentStep ? "isActive" : ""}`}>
      <InputField
        name="customer_info.firstname"
        label="First Name"
        required="First Name is Required"
      />
      <InputField
        name="customer_info.lastname"
        label="Last Name"
        required="Last Name is Required"
      />
    </div>
  );
};

There is your Codesandbox with this code 😊

Screen.Recording.2021-07-27.at.12.26.59.mov

I hope this can help, feel free to ask for more details if it's not clear 🤗

[ivan-dalmet]

I'm not sure to understand the problem or the solution ^^
But if it's works :)
Feel free to ask for more help if you're facing other issues.

[lscmaro]

Not that it matters now but, for better understanding ... Adding useDependentField code makes the fields on 1st step not required. You can click 'continue' button without adding values to 1st step required fields. These should rather trigger error when empty and continue is clicked. CodeSandbox

[ivan-dalmet]

Oh yes that's weird 🧐

[ivan-dalmet]

Ok I've found the issue, it's an issue with debounce on fields and setFieldsValues 😕
I will need more time to look into it.

If anyone is interested, the following code is working (unless the debounce value is change on a field 😕)

import { useEffect } from "react";
import { useForm } from "@formiz/core";
import get from "lodash/get";

export const useDependentField = (fieldNameOrigin, fieldNameDestination) => {
  const { setFieldsValues, values, fields } = useForm({
    subscribe: { fields: [fieldNameOrigin, fieldNameDestination] }
  });
  const fieldOriginValue = get(values, fieldNameOrigin); // Needs Lodash here to handle nested fields names
  const fieldDestinationPristine = get(fields, fieldNameDestination)
    ?.isPristine; // Needs Lodash here to handle nested fields names

  useEffect(() => {
    // Update only if the destination field is pristine
    if (fieldDestinationPristine) {
      const timer = setTimeout(() => {
        setFieldsValues({ [fieldNameDestination]: fieldOriginValue });
      }, 100); // Default debounce time 😕
      return () => clearTimeout(timer);
    }
  }, [
    setFieldsValues,
    fieldNameDestination,
    fieldOriginValue,
    fieldDestinationPristine
  ]);
};

If I've time, I will try to debug this use case when a setFieldsValues is called on mount.

[ivan-dalmet]

I've created an issue #82