Copy Below Code View As A Text File Show Text Only Show API Edit Code

                            
import { Formik, useFormik } from 'formik';
import React from 'react';

const TestComponent = () => {
  const formik = useFormik({
    initialValues: { email: "" },
    onSubmit: values => {
      alert(JSON.stringify(values, null, 2));
    }
  });
  return (
    <>
        {/* Method 1 */}
        <Formik
          initialValues={{}}
          validate={values => {
            console.log('values', values);
            const errors = {};
            if (!values.name) {
              errors.name = 'Name is Required';
            }
            return errors;
          }}
          onSubmit={(values, actions) => {
            console.log('values', values);
            console.log('actions', actions);
          }}
        >
          {/* --- {()=>{}} */}
          {({
            values,
            errors,
            touched,
            handleChange,
            handleBlur,
            handleSubmit
          })=>(
            <form onSubmit={handleSubmit}>
              {console.log("error", errors)}
              <input type="text" name="name" onChange={handleChange} onBlur={handleBlur} values={values.name} />
              {errors.name && touched.name && errors.name}
              <button type="submit">Submit</button>
            </form>
          )}
        </Formik>

        {/* Method 2 */}
        <form onSubmit={formik.handleSubmit}>
        <label htmlFor="email">Email Address</label>
        <input
        id="email"
        name="email"
        type="email"
        onChange={formik.handleChange}
        value={formik.values.email}
        />
        <button type="submit">Submit</button>
        </form>
    </>
  )
}
export default TestComponent;


// Validations Example
// We can below our customize validations in this way
validate={async (values) => {
        try{
          await validateYupSchema(
            values,
            CreateDialogSchema({
                values,
            }),
            true,
            values
          );
        }catch (err) {
          return yupToFormErrors(err);
        }
        return {};
      }}
return 
export const CreateDialogSchema = ({
    values
}) => {
Yup.object().shape({
        languages: Yup.array()
        .required("Language(s) are required")
        .min(1, "Language(s) are required"),
        subAccountIds: Yup.array()
        .nullable()
        .when(["mainOrSub"], {
            is: (mainOrSub) => !!mainOrSub,
            then: Yup.array().nullable().min(1, "Sub-Account ID is required"),
        }),
        departmentIds: Yup.array()
        .required()
        .min(1, `At least one Department is required`),
        keyoptInSmsMessage: Yup.string()
            .required("Opt-In SMS Response Key is Required")
            .test(smsResponseKey(
                responseKeys,
                "keyoptInSmsMessage"
            )),
)}
const smsResponseKey = (responseKeys,key="") => {
    return function (value = "") {
        const values = value.split(",");
        const rest = { ...responseKeys };
        if (key && responseKeys.hasOwnProperty(key)) {
            delete rest[key];
        }
        const filteredArr = Object.values(rest);
        

        if (values.some((value) => 
            filteredArr?.map(v => v.toLowerCase())
            .includes(value.toLowerCase())))
            return this.createError({
                message: "Response Key already exists",
                path: this.path,
            });
        if (values.some((value) => !AlphaNumeric.test(value))) {
            return this.createError({
                message: "Response Key should be alphanumeric",
                path: this.path,
            });
        }
        return true;
    };
};
}