CODEWITHSUNDEEP
javascriptreactjsformstypescriptformik
user10104341
user10104341

Reputation:

Formik | How to user Multiple validation schemas and render Split Views for a form

I understand this may be an unothodox question, or even 2 in one, but please believe me when I say thiese 2 cannot be answered seperately. Please keep that in mind. Thank you for your time..

My question revolves around a particular scenario I am currently facing. I am using the withFormik H.O.C, along with Yup, to handle various cases in my forms, such as submitting, errorHandling, and a few more depending on the situation.

Usually, my form situation involves a Create and an Edit Mode.

onCreate => Pass the defaultvalues and call the POST Method, from my services.

onEdit => Populate the values with the current Item Values from the Server, and call the PUT Method from the services.

Example

  const validationSchema = Yup.object().shape({
    username: Yup.string('Provide a Username').required('Username is Required'),
    email: Yup.string().email('Provide a Valid email Address'),
    password: Yup.string('Provide a Password').required('Password is required'),
    confirmPassword: Yup.string('Provide your password again')
      .required('Password Confirmation is Required')
      .oneOf([Yup.ref('password')], 'Passwords do not match'),
  });

  const EnchancedCreateUserForm = withFormik({
    mapPropsToValues: ({
      user = {
        username: '',
        email: '',
        password: '',
        confirmPassword: '',
      }
    }) => ({ ...user }),

    validationSchema,

    handleSubmit: (values, { props, setSubmitting }) => {
      const { doSubmit, onSave, inEditMode } = props;

      const saveUser = inEditMode ? updateUser : createUser;
      return doSubmit(saveUser, values)
        .then(() => {
          setSubmitting(false);
          onSave();
        })
        .catch(() => {
          setSubmitting(false);
        });
    },

    displayName: 'AddEditUser'
  })(AddEditUser);

That is actually been working great for me, since my Create and Edit Form are the same. And here lay my 2 problems.

Current Situation My current form implementation has 2 views. One unified one on Create with those 4 fields, and on Edit, I have 2 forms. One for passwordChange and one for infoChange. Which makes me face the following problems.

I would need 3 FormValidationSchemas(CREATE, EDIT-INFO, EDIT-PASSWORD). Which I am not sure formik even supports. How exactly, should I handle the rest of the functionality, onSubmit, ErrorMessage for both field error and statusError? If you could actually help me out figure a way of attack it would be great.

I read the validationSchema can be passed a function that returns a validationSchema, so I did this, but it is not working:

  const validationFullSchema = Yup.object().shape({
    username: Yup.string('Provide a Username').required('Username is Required'),
    email: Yup.string().email('Provide a Valid email Address'),
    password: Yup.string('Provide a Password').required('Password is required'),
    confirmPassword: Yup.string('Provide your password again')
      .required('Password Confirmation is Required')
      .oneOf([Yup.ref('password')], 'Passwords do not match'),
  });

  const validationEditSchema = Yup.object().shape({
    username: Yup.string('Provide a Username').required('Username is Required'),
    email: Yup.string().email('Provide a Valid email Address'),
  });

 const validationSchemaFn = () => {
     If ( efitMode ) {
       return validationCreateSchema

} return validationEditSchema }

  validationSchema: validationSchemaFn(),
  // Which throws an error
  // Failed to load app. Error: Cannot read property 'props' of undefined

I probably am doing something wrong, but I put it here just in case.

My Opinion on the matter

What do you of my proposed solution? If you like it, could you please make it better or help with some code samples, especially in the multiple validationSchemas issues. Thank you!!

Upvotes: 1

Views: 5904

Answers (1)

Nidhi Dadiya
Nidhi Dadiya

Reputation: 839

You should create one formik form only. and from where you're calling the form component pass the action as 1 for create and 2 for edit. from props, if you get 2, don't display the password component. Rest will be visible. use the same validation schema, give some static values for password and confirm password in case of edit so that your schema can let you submit your form. and just change the request body respectively for create and edit.

Upvotes: 1

Related Questions