Блог

Поэтому я пытаюсь проверить свою форму с помощью пакета Yup, есть функция createForm для создания формы, которая создает форму с уникальным идентификатором, а затем этот идентификатор передается полям для каждой созданной формы. Я пытаюсь проверить эти поля для каждой созданной формы, но мне не удается проверить эти входные данные с помощью уникального идентификатора. Вот код :

 import { nanoid } from 'nanoid';

const AddContact = () => {
  const [formData, setFormData] = useState([{key: nanoid()}])

    const createForm = () => {
      setFormData(prevFormData => [...prevFormData, {key: nanoid()}])
    }

   const deleteForm = (key) => {
      setFormData(prevFormData => prevFormData.filter(item => item.key !== key))
    }

return(
<Formik
      initialValues={{}}
      validationSchema={
      formData.map(data => {
         Yup.object().shape({
           [`name_${data.key}`]: Yup.string().required("Please enter a valid name"),
           [`company_${data.key}`]: Yup.string().required("Please enter a Company name"),
           [`mobile_no_${data.key}`]: Yup.number().typeError("Please enter a valid mobile number"),
           [`email_${data.key}`]: Yup.string().email().required("Please enter a valid email"),
         })
       })
     }
       //onSubmit={onSubmit}
>
 {({ handleSubmit, values }) => {
       return(
            <div>
              {formData.map((data, index) => {
               return(
               <button onClick={() => deleteForm(data.key)}}>
               <input name={`name_${data.key}`}>
               <input name={`company_${data.key}`}>
               <input name={`mobile_no_${data.key}`}>
               <input name={`email_${data.key}`}>
              )})}
              <button onClick={createForm}/>
            </div>
     )
}}


 

Попробуйте этот код: я создал validationSchema из FormData, и он отлично работает, как показано errors на рисунке и values в нижней части формы прямо сейчас.

 import React, { useState } from "react";
import { Formik } from "formik";
import { nanoid } from "nanoid";
import * as Yup from "yup";

const AddContact = () => {
  const [formData, setFormData] = useState([{ key: nanoid() }]);

  const createForm = () => {
    setFormData((prevFormData) => [...prevFormData, { key: nanoid() }]);
  };

  const deleteForm = (key) => {
    setFormData((prevFormData) =>
      prevFormData.filter((item) => item.key !== key)
    );
  };

  const validationSchema = {
    ...formData.reduce((result, data) => {
      result = {
        ...result,
        [`name_${data.key}`]: Yup.string().required(
          "Please enter a valid name"
        ),
        [`company_${data.key}`]: Yup.string().required(
          "Please enter a Company name"
        ),
        [`mobile_no_${data.key}`]: Yup.number().typeError(
          "Please enter a valid mobile number"
        ),
        [`email_${data.key}`]: Yup.string()
          .email()
          .required("Please enter a valid email")
      };
      return resu<
    }, {})
  };

  return (
    <Formik
      initialValues={{}}
      validationSchema={Yup.object().shape(validationSchema)}
    >
      {({ handleSubmit, values, errors, handleChange }) => {
        return (
          <div>
            {formData.map((data, index) => (
              <div key={index} style={{ margin: 10 }}>
                <button onClick={() => deleteForm(data.key)}>Delete</button>
                <input name={`name_${data.key}`} onChange={handleChange} />
                <input name={`company_${data.key}`} onChange={handleChange} />
                <input name={`mobile_no_${data.key}`} onChange={handleChange} />
                <input name={`email_${data.key}`} onChange={handleChange} />
              </div>
            ))}
            <button onClick={createForm} style={{ margin: 10 }}>
              Create Form
            </button>
            <button type="submit" onClick={handleSubmit}>
              Submit
            </button>
            {errors amp;amp; (
              <div>
                <div>ERRORS: {JSON.stringify(errors)}</div>
                <div>VALUES: {JSON.stringify(values)}</div>
              </div>
            )}
          </div>
        );
      }}
    </Formik>
  );
};

export default AddContact;