时间戳

首页 > 解决方案 > Formik 在空字段上也显示错误

javascript - Formik 在空字段上也显示错误

问题描述

当我打开屏幕时，在我第一次提交表单之前，我看不到任何验证错误。正确输入电子邮件地址并通过单击按钮提交表单后，表单逻辑将正常工作。显示警报并重置字段（有意）

但是，一旦我关闭警报，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>

标签： javascriptreactjsreact-nativeformikyup

解决方案

您可以使用setFieldError或setErrors。

我不确定您要清除错误的确切位置，但如果不在表单内，您可以获取refformik 组件的 a 并调用setFieldErroror setErrors。

例如

setFieldError('email', undefined)

关于您的代码的其他与问题无关的观察结果

这样做values.email = '';不是一件好事，如果你想重置email你应该使用的值setFieldValue，就像你将使用的一样setFieldError。

例如

helpers.setFieldValue('email', '')

推荐阅读