Пользователь может добавить или удалить контейнер полей. Когда мы добавляем контейнер несколько раз, и его соответствующие поля также будут повторяться,
Как мы можем показать ошибку на уровне поля. Так как множественное поле имеет одно и то же имя в несколько контейнеров.
Если мы удалим какой-либо из контейнеров, то это не должно повлиять на любой другой статус ошибки контейнера.
Form-
import React from 'react';
import { Formik, Form, Field, ErrorMessage } from 'formik';
import * as Yup from "yup";
const SignupSchema = Yup.object().shape({
name: Yup.string()
.min(2, 'Too Short!')
.max(70, 'Too Long!')
.required('Required'),
});
export const ValidationSchemaExample = () => (
<div>
<h1>Signup</h1>
<Formik
initialValues={{
name: '',
}}
validationSchema={SignupSchema}
onSubmit={values => {
// same shape as initial values
console.log(values);
}}
>
{({ errors, touched }) => (
<Form>
-----------container 1-----------
<Field name="name" />
- {errors.name && touched.name ? (
- <div>{errors.name}</div>
- ) : null}
+ <ErrorMessage name="name" />
-----------container 2----------
<Field name="name" />
{errors.name && touched.name ? (
<div>{errors.name}</div>
) : null}
<ErrorMessage name="name" />
---------
<button type="submit">Submit</button>
</Form>
)}
</Formik>
</div>
);