提交表单后清除formik错误

时间:2020-08-11 08:38:40

标签: javascript reactjs typescript react-native formik

当我进入屏幕时,在输入字段上没有显示任何错误。在我的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在这里没有任何区别。

0 个答案:

没有答案