Formik有两个选项可控制何时进行验证:validateOnChange
和validateOnBlur
。
使用validateOnChange
的问题-用户在开始输入例如电子邮件时会遇到错误-因为在您刚开始输入首字母时无效。
在validateOnBlur
的情况下-假设用户输入了无效的电子邮件,离开了该字段,返回并更正了正确的电子邮件-该错误将一直显示,直到他们离开该字段为止,因此对于我。
我要实现的目标-第一次验证blur
上的字段,然后开始-change
上的字段。
每个领域都应单独进行此处理。
我试图找到执行此操作的本机方法,但找不到任何方法,所以我想出了一种我并不喜欢的解决方案,因为它并非完美无缺:
TL;DR:
我会覆盖来自onBlur
的道具和{} {1}}的标准onChange
和Field
-将字段标记为已更改一次(可能我可以在此处使用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
问题是-有没有办法使它更容易? 此解决方案的问题-如果我提交并提交未修改的表单并且出现一些错误-焦点和修复值不会将字段标记为有效-因为这是第一个“触摸”并且字段仍处于统计状态,因此应该等待第一个模糊状态聆听“变化”。
无论如何,保持这种状态可能会很痛苦,因此正在寻找更好的解决方案。 谢谢!