当我打开屏幕时,在我第一次提交表单之前我没有看到任何验证错误。正确输入电子邮件地址并通过点击按钮提交表单后,表单逻辑将正常工作。显示警报并重置字段(有意)
但是,一旦我关闭警报,Formik 仍然向我显示错误,要求我必须输入电子邮件地址(必填字段)。是否也可以重置错误?就像我第一次打开屏幕时一样?我希望此错误仅在我提交表单而不输入任何内容时出现。
我的代码片段:
在此处重置值:
const initialValues: FormValues = {
email: '',
};
const handleSubmitForm = React.useCallback(
(values: FormValues, helpers: FormikHelpers<FormValues>) => {
console.log('Submitted');
loadUsers({
variables: {
where: { email: values.email },
},
});
values.email = '';
},
[loadUsers],
);
<Formik
initialValues={initialValues}
onSubmit={handleSubmitForm}
validationSchema={validationSchema}>
{({
handleChange,
handleBlur,
handleSubmit,
values,
}) => (
<View style={styles.searchFieldContainer}>
<View
style={styles.form}
>
<FieldInput
handleChange={handleChange}
handleBlur={handleBlur}
value={values.email}
fieldType="email"
/>
<ErrorMessage
name="email"
render={(msg) => (
<Text style={styles.errorText}>
{msg}
</Text>
)}
/>
</View>
<View style={styles.buttonContainer}>
<Button
rounded
style={styles.button}
onPress={handleSubmit}>
<Text style={styles.text}>
Add Friend{' '}
</Text>
</Button>
</View>
</View>
)}
</Formik>
最佳答案
您可以使用 setFieldError
或 setErrors
.
我不确定你到底想在哪里清除错误,但如果不在表单内,你可以获取 formik 组件的 ref
并调用 setFieldError
或 setErrors
。
例如
setFieldError('email', undefined)
与问题无关的关于您的代码的其他观察结果
values.email = '';
不是一件好事,如果你想重置 email
的值,你应该使用 setFieldValue
,就像您将使用 setFieldError
一样。
例如
helpers.setFieldValue('email', '')
关于javascript - Formik 在空白字段上也显示错误,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/61714522/