如何在Formik中自定义错误显示逻辑?

时间:2019-04-21 05:19:36

标签: reactjs formik

Formik有两个选项可控制何时进行验证:validateOnChangevalidateOnBlur

使用validateOnChange的问题-用户在开始输入例如电子邮件时会遇到错误-因为在您刚开始输入首字母时无效。

validateOnBlur的情况下-假设用户输入了无效的电子邮件,离开了该字段,返回并更正了正确的电子邮件-该错误将一直显示,直到他们离开该字段为止,因此对于我。

我要实现的目标-第一次验证blur上的字段,然后开始-change上的字段。

每个领域都应单独进行此处理。

我试图找到执行此操作的本机方法,但找不到任何方法,所以我想出了一种我并不喜欢的解决方案,因为它并非完美无缺:

TL;DR:我会覆盖来自onBlur的道具和{} {1}}的标准onChangeField-将字段标记为已更改一次(可能我可以在此处使用onBlur)b)touched我检查是否曾经触摸过该字段,如果是,则进行-呼叫验证。

0)禁用验证

onChange

1)将<Formik validateOnChange={false} validateOnBlur={false} ... 添加到了我的状态

changedFields

2)使用特殊方法覆盖默认的public state: IState = { changedFields: {} }; onBlur

onChange

3)方法。通过Field的道具和状态为<Field name="userName" render={(props: FieldProps<MyFormInterface>) => ( <input type="text" label={'Name'} {...formikCustomValidation(props, this)} /> )}/> 的父组件。

changedFields

问题是-有没有办法使它更容易? 此解决方案的问题-如果我提交并提交未修改的表单并且出现一些错误-焦点和修复值不会将字段标记为有效-因为这是第一个“触摸”并且字段仍处于统计状态,因此应该等待第一个模糊状态聆听“变化”。

无论如何,保持这种状态可能会很痛苦,因此正在寻找更好的解决方案。 谢谢!

0 个答案:

没有答案
相关问题