I need to validate Dynamically created fields with formik or yup .I have seen this validation done by in jquery validatioh here
My code in here https://codesandbox.io/s/hidden-haze-47k73?file=/src/demo.js
How do i achieve this using formik and yup
I need to validate Dynamically created fields with formik or yup .I have seen this validation done by in jquery validatioh here
My code in here https://codesandbox.io/s/hidden-haze-47k73?file=/src/demo.js
How do i achieve this using formik and yup
If you using formik
FieldArray
. You can check it's fields with yup
:
firends: Yup.array().of(
Yup.object().shape({
name: Yup.string().required('Name is required'),
email: Yup.string()
.email("Invalid email")
.required('Email is required'),
})
),
And your FieldArray
will be:
<FieldArray
name="firends"
render={(arrayHelpers) => {
{values.firends && values.firends.length > 0 ? (
values.firends.map((friend, index) => (
<div key={index}>
<Field
className="form-control"
name={`friends.${index}.name`}
placeholder="name"
type="text"
/>
{errors &&
errors.friends &&
errors.friends[index] &&
errors.friends[index].name &&
(touched &&
touched.friends &&
touched.friends[index] &&
touched.friends[index].name) && (
<div className="field-error">
{errors.friends[index].name}
</div>
)}
<Field
className="form-control"
name={`friends.${index}.email`}
placeholder="email"
type="text"
/>
{errors &&
errors.friends &&
errors.friends[index] &&
errors.friends[index].email &&
(touched &&
touched.friends &&
touched.friends[index] &&
touched.friends[index].email) && (
<div className="field-error">
{errors.friends[index].email}
</div>
)}
</div>
))
}}
You can find fully ready code here
FieldArray
or what ? Can you show minimum code for it? – aturan23