当我进入屏幕时,在输入字段上没有显示任何错误。在我的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')
.max(70, 'Too Long!')
.min(3, 'Too Short!'),
});
如何清除/重置错误以及表格?
setErrors在这里没有任何区别。