我在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 有效则隐藏。
问题仅出现在第一次渲染表单时。 有什么想法,什么会导致这个问题?
这是预期的行为。
<ErrorMessage />
仅当满足以下两个条件时才会显示:
touched
属性是 true
默认情况下,Formik 会在模糊时将
touched
设置为 true。这就是为什么只有当您在输入之外单击时才会显示错误消息的原因。
如果您想强制在模糊之前显示错误消息,您可以手动将输入的 Touched 属性设置为 true。这可以通过多种方式完成,但最简单的是通过
initialTouched
上的 <Formik />
道具。如果表单预加载了来自后端的数据,您可能还需要将 validateOnMount
属性设置为 true
。
例如:
<Formik
validateOnMount
initialTouched={{zip: true}}
>
...
</Formik>
Irfanullah Jan 描述了为什么该错误对于未触及的字段不可见。
如果您正在执行动态验证(来自服务器响应或其他方式)并希望包含未触及的字段,则命令式版本将如下所示:
const field = 'username';
const errorMessage = 'Must be present';
formikBag.setFieldTouched(field);
formikBag.setFieldError(field, errorMessage);