Creating the MainForm

In MainForm.jsx file, import the files required:

import * as React from "react";
import { Form, Formik } from "formik";
import { Container, Col, Row } from "reactstrap";
import * as Yup from "yup";
import TextInput from "./TextInput";
import AddressForm, {
  addressValidationSchema,
  addressInitialValues,
} from "./AddressForm";
import UserForm, { userValidationSchema, userInitialValues } from "./UserForm";

 

Then we create the validationSchema and initialValues object for this MainForm:

const validationSchema = Yup.object({
  email: Yup.string().email("Invalid email address").required("Required"),
  user: userValidationSchema,
  address: addressValidationSchema,
});

const initialValues = {
  email: "",
  user: userInitialValues,
  address: addressInitialValues,
};

Here, we have treated email field as part of only the MainForm.

Now, we render the MainForm and send props to UserForm and AddressForm for onChange event and the subForm's namespace.

Add the following lines to MainForm.jsx:

const MainForm = () => {
  return (
    <Formik
      initialValues={initialValues}
      validationSchema={validationSchema}
      onSubmit={(values, { setSubmitting, resetForm }) => {
        console.log(values);
        setSubmitting(false);
        resetForm(initialValues);
      }}
    >
      {(formik) => {
        return (
          <Container>
            <h2 className="mt-5 text-center">Formik Subform Example</h2>
            <Form onSubmit={formik.handleSubmit}>
              <Row style={{ marginTop: "50px" }}>
                <Col xs={12}>
                  <TextInput
                    type="email"
                    name="email"
                    label="Email"
                    placeholder="Email"
                    onChange={formik.handleChange}
                    required
                  />
                </Col>
              </Row>
              <br />
              <UserForm handleChange={formik.handleChange} namespace="user" />
              <br />
              <AddressForm
                handleChange={formik.handleChange}
                namespace="address"
              />

              <Row>
                <Col xs={12} sm={{ size: 4, offset: 4 }}>
                  <input
                    className="my-4 btn btn-primary btn-block"
                    type="submit"
                    value="Submit"
                  />
                </Col>
              </Row>
            </Form>
          </Container>
        );
      }}
    </Formik>
  );
};

export default MainForm;