如何解决提交表格后删除Formik错误消息
进入我的屏幕后,输入字段上没有显示错误。
在我的表单中,我接受输入并对其运行graphql突变。完成后,我将重置表单。但是,重置后,我开始看到Formik错误,因为该字段为 .required(),并且当前为空。
仅当我尝试不输入任何内容提交表单时,才应显示此错误。成功提交一次后,它应该不会显示。
const handleSubmitForm = (
values: FormValues,helpers: FormikHelpers<FormValues>,) => {
editLocationName({
variables: {
favouritePlaceId: route.params.id,input: {customisedName: values.locationName}
},});
helpers.resetForm();
helpers.setErrors({});
};
.....
<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.locationName}
fieldType="locationName"
placeholderText="Neuer Name"
/>
<ErrorMessage
name="locationName"
render={(msg) => <ErrorText errorMessage={msg} />}
/>
</View>
<View style={styles.buttonContainer}>
<ActionButton buttonText="Save" onPress={handleSubmit} />
</View>
</View>
)}
</Formik>
验证模式:
const favouriteLocationNameValidationSchema = yup.object().shape({
locationName: yup
.string()
.label('locationName')
.required('Required Field')
});
如何重置错误消息和表单?
setErrors({})对我不起作用。
解决方法
在此处添加它,因为建议需要代码。添加以下代码,让我知道是否有帮助。
helpers.resetForm({
errors: {},touched: {}
});
Remove helpers.setErrors({});
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。