Formik Field проверить с помощью Yup

Question

Я просматривал документы , и вы можете проверить Field, передав validate в Field, который является функцией.

, например

const validate = value => {
  let errorMessage;
  if (!/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i.test(value)) {
    errorMessage = 'Invalid email address';
  }
  return errorMessage;
};

...

<Field validate={validate} name="email" type="email" />

Как заменить функцию validate на Yup?

Если вы спросите, почему я это делаю ...

Вместо того, чтобы иметь огромный validationSchema объект, я хочу передать Yup объект проверки прямо в Field, потому что моя форма генерируется динамически.

Answer 1

Кажется, что Formik по какой-то причине не предоставляет способ сделать это изначально.Вы можете сделать это так:

<Field
  name="email"
  type="email"
  validate={value =>
    Yup.string()
      .matches(/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i, "Invalid")
      .validate(value)
      .then(() => undefined)
      .catch(({ errors }) => errors[0])
  }
/>

Рабочий пример на CodeSandbox.