Formik ErrorMessage 第一次未显示

Question

我在react项目中使用Formik表单。我里面有以下代码

<Formik><Form>

<Field name="zip" validate={some validation is here}>
       <input {...fieldProps.field}
               id="zip"
               name="zip"
               className="form-control"
               placeholder="zip"
               required={true}
               maxLength={5}
               onKeyDown={(event) => this.onZipChange(event)}/>
</Field>
<ErrorMessage name="zip" render={msg => <div>{msg}</div>} />

渲染表单时，我对输入进行更改，例如，从 zip 中删除一个数字，因此在 props.formProps.errors 中出现错误文本，但 ErrorMessage 未显示。在我单击页面的任何位置后，它就会出现，然后它会继续按预期工作：如果 zip 中出现任何错误，按下按键时它会显示 ErrorMessage，如果 zip 有效则隐藏。

问题仅出现在第一次渲染表单时。 有什么想法，什么会导致这个问题？

Answer 1

这是预期的行为。

<ErrorMessage />

仅当满足以下两个条件时才会显示：

• 给定字段有错误消息
• 该字段的

  touched

  属性是

  true

默认情况下，Formik 会在模糊时将

touched

设置为 true。这就是为什么只有当您在输入之外单击时才会显示错误消息的原因。

如果您想强制在模糊之前显示错误消息，您可以手动将输入的 Touched 属性设置为 true。这可以通过多种方式完成，但最简单的是通过

initialTouched

上的

<Formik />

道具。如果表单预加载了来自后端的数据，您可能还需要将

validateOnMount

属性设置为

true

。

例如：

<Formik
  validateOnMount
  initialTouched={{zip: true}}
>
  ...
</Formik>

Answer 2

Irfanullah Jan 描述了为什么该错误对于未触及的字段不可见。

如果您正在执行动态验证（来自服务器响应或其他方式）并希望包含未触及的字段，则命令式版本将如下所示：

const field = 'username';
const errorMessage = 'Must be present';
formikBag.setFieldTouched(field);
formikBag.setFieldError(field, errorMessage);