将 Yup 验证错误转换为可用对象

Question

问题

我有一个 formik 表单，需要有 2 个不同的验证模式，具体取决于用户使用哪个按钮提交。我看到有些人说使用状态来决定哪个，但我想避免使用状态，因为在这种情况下感觉不对。

我已经查看了Yup 的文档，似乎您可以直接使用模式并传递值进行验证。这似乎是有效的，正如我在示例中所示的那样，但是它返回的验证错误是无用的，我需要将它们转换为能够使用 Formik setErrors 帮助器。

是的，根据文档进行验证

let validationErrors = null;

try {
  // Validate the form data using a custom Schema
  await createDraftContractorFormValidationSchema.validate(values, { abortEarly: false, strict: false });
}
catch (errors: any) {
  console.log(errors);
  // What I essentially need here is a way to transform these errors
  // into an object with the keys being the field that has errors and the message
  if (errors) {
     formikRef.current.setErrors(errors);
  }
}

记录什么

ValidationError: 4 errors occurred
    at finishTestRun (runTests.js:54:1)
    at runTests.js:8:1
    at finishTestRun (runTests.js:54:1)
    at runTests.js:8:1
    at finishTestRun (runTests.js:54:1)
    at createValidation.js:60:1

Answer 1

我最终在一些不起眼的论坛中找到了我所做的事情，但我认为它将来可能对 Stack 上的其他人有用。感谢答案https://lightrun.com/answers/jaredpalmer-formik-yup-schemavalidate-options-show-every-error-of-a-field-at-the-same-time。

本质上，我创建了一个辅助方法，将 Yup 的验证错误转换为一个有用的对象，您可以将其直接传递到 Formik 的 setErrors 方法中。

帮手

/**
 * TransformYupErrorsIntoObject
 *
 * @description Transform the useless yup error into a useable validation object
 * @param {ValidationError} errors Yup validation errors
 * @returns {Record<string, string>} Validation errors
 */
export const transformYupErrorsIntoObject = (errors: ValidationError): Record<string, string> => {
  const validationErrors: Record<string, string> = {};

  errors.inner.forEach((error: any) => {
    if (error.path !== undefined) {
      validationErrors[error.path] = error.errors[0];
    }
  });

  return validationErrors;
};

执行

try {
  // You need to define this schema as a model of your form
  // Abort early will ensure all the fields validate not just one
  await createDraftContractorFormValidationSchema.validate(values, { abortEarly: false, strict: false });
}
catch (error: any) {
  // Transform the validationErrors
  const validationErrors = transformYupErrorsIntoObject(error);

  // Set errors on the field showing the user the errors
  formikRef.current.setErrors(validationErrors);

  return;
}