values and formiApi is undefined in onSubmit

[Nilesh9768]

I'm trying to capture the form values with the click of submit button. But the values and formApi both are undefined.

What am I missing here?

Hoping for a quick response. Thank you!

import FormRenderer from "@data-driven-forms/react-form-renderer/form-renderer";
import componentTypes from "@data-driven-forms/react-form-renderer/component-types";
import useFormApi from "@data-driven-forms/react-form-renderer/use-form-api";
import useFieldApi from "@data-driven-forms/react-form-renderer/use-field-api";
import validatorTypes from "@data-driven-forms/react-form-renderer/validator-types";

const TextField = (props) => {
  const { input, meta } = useFieldApi(props);
  const { valid, getState } = useFormApi();
  const { value, onChange } = input;
  const { touched, error } = meta;
  const { submitFailed } = getState();
  // console.log("getState", submitFailed);
  return (
    <div>
      <input type="text" value={value} onChange={onChange} />
      <div>{error}</div>
    </div>
  );
};

const CheckBox = (props) => {
  const { input } = useFieldApi(props);
  const { checked, onChange } = input;
  // console.log("checkbox", input);
  return (
    <div>
      <input type="checkbox" onChange={onChange} />
    </div>
  );
};
const componentMapper = {
  [componentTypes.TEXT_FIELD]: TextField,
  [componentTypes.CHECKBOX]: CheckBox
};

const FormTemplate = ({ schema, formFields }) => {
  const formOptions = useFormApi();
  const { handleSubmit, onSubmit } = formOptions;
  const { valid, getState } = useFormApi();
  const { submitFailed } = getState();
  return (
    <form
      onSubmit={(e) => {
        console.log("submitFailed", onSubmit);
        e.preventDefault();
        onSubmit();
      }}
    >
      {schema.title}
      {formFields}
      <button type="submit">Submit</button>
    </form>
  );
};
const schema = {
  title: "Start typing",
  fields: [
    {
      component: componentTypes.TEXT_FIELD,
      name: "custom-validator",
      label: "Custom validator",
      helperText: "type name John to fail validation",
      validate: [
        { type: validatorTypes.REQUIRED, message: "Field is required" },
        {
          type: validatorTypes.PATTERN,
          pattern: /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/,
          message: "Invalid Email"
        }
      ]
    },
    {
      component: componentTypes.TEXT_FIELD,
      name: "password",
      label: "Custom validator",
      helperText: "type name John to fail validation",
      condition: {
        when: "checkbox",
        is: true,
        then: {
          set: { password: "User123" }
        },
        else: { visible: true, set: { password: "" } }
      },
      validate: [
        { type: validatorTypes.REQUIRED, message: "Field is required" },
        {
          type: validatorTypes.MIN_LENGTH,
          threshold: 5
        }
      ]
    },
    {
      component: componentTypes.CHECKBOX,
      name: "checkbox"
    }
  ]
};

const CustomValidator = () => (
  <FormRenderer
    FormTemplate={FormTemplate}
    componentMapper={componentMapper}
    schema={schema}
    onSubmit={(values, formApi) => {
      console.log("values", values);
      console.log("formApi", formApi);
    }}
  />
);

export default CustomValidator;

[Hyperkid123]

@Nilesh9768 that is because you are calling the onSubmit but you are supposed to use the handleSubmit. The form submit callback should look like this

<form
  onSubmit={(e) => {
    handleSubmit(e);
  }}
>
// or simply
<form onSubmit={handleSubmit}>

You can follow the docs here: https://data-driven-forms.org/components/form-template#heading-minimalformtemplate

The on onSubmit is the actual unchanged onSubmit callback you pass to the renderer. And since you are not giving it any arguments, it does not has any in the callback.

Her is your code with working submit: https://codesandbox.io/s/hungry-http-kdyqv9?file=/src/App.js:1393-1571

[Nilesh9768]

@Hyperkid123 Thank you so much! This worked for me.