使用带有键的Yup进行验证

Question

所以我试图使用Yup包验证我的表单，有一个函数createForm创建一个表单，创建一个具有唯一ID的表单，然后该ID传递给创建的每个表单的字段。我试图验证每个表单创建的字段，但我无法验证这些输入与唯一的id存在。下面是代码:

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>
)
}}

Answer 1

试试下面的代码:我已经从formData创建了validationSchema，它工作得很好，因为它现在在表单的底部显示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 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;