当Formik出现错误时，如何显示通用消息?

Question

我有一个表单使用Formik与Yup验证。在每个Field下，我有一个<ErrorMessage />组件来显示该表单字段的相关消息。但是，由于有许多字段，所以我希望在用户提交表单时在提交按钮旁边显示一条通用消息。像这样:

<div className="alert alert-danger">
One or more fields has an error.
</div>

我尝试根据Formik的errors对象有条件地渲染它:

{Object.keys(errors).length > 0 && (
<div className="alert alert-danger">
One or more fields has an error.
</div>
)}

但是，当我onBlur任何字段时，所有字段都在内部验证，无论它们是否被触摸，因此只要我填写了第一个表单，就会呈现此错误消息。如果字段已被触摸或在其旁边显示错误消息，我如何仅呈现此消息?

Answer 1

因为您只想在提交时显示错误消息，所以Formik具有isValid和submitCount属性。一起使用它们来确定是否应该呈现错误消息:

{!isValid && submitCount > 0 && (
<div className="alert alert-danger">
One or more fields has an error.
</div>
)}

这将导致它只在表单提交后才呈现，如果有任何错误，并且在所有错误被修复后自动消失。