Отображать ошибки для полей Dynami c в Formik - PullRequest
0 голосов
/ 04 марта 2020

Пользователь может добавить или удалить контейнер полей. Когда мы добавляем контейнер несколько раз, и его соответствующие поля также будут повторяться,

  1. Как мы можем показать ошибку на уровне поля. Так как множественное поле имеет одно и то же имя в несколько контейнеров.

  2. Если мы удалим какой-либо из контейнеров, то это не должно повлиять на любой другой статус ошибки контейнера.

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>
);
...