Entonces, estoy tratando de validar mi formulario usando el paquete Yup, hay una función createForm para crear un formulario que crea un formulario con una identificación única, y luego esa identificación se pasa a los campos para cada formulario que se crea. Estoy tratando de validar esos campos para cada formulario creado, pero no puedo validar esas entradas con la identificación única presente. Aquí está el código:
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> ) }}Pruebe este código: he creado el esquema de validación a partir de formData y funciona bien, ya que muestra errors y values en la parte inferior del formulario en este momento.
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 result; }, {}) }; 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 && ( <div> <div>ERRORS: {JSON.stringify(errors)}</div> <div>VALUES: {JSON.stringify(values)}</div> </div> )} </div> ); }} </Formik> ); }; export default AddContact;