Question

进入我的屏幕后，输入字段上没有显示错误。

在我的表单中，我接受输入并对其运行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（{}）对我不起作用。

Answer 1

在此处添加它，因为建议需要代码。添加以下代码，让我知道是否有帮助。

helpers.resetForm({
 errors: {},
 touched: {}
});

Remove helpers.setErrors({});

提交表格后删除Formik错误消息

1 个答案: