Formik 在空字段上也显示错误

Posted 2023-03-23

【中文标题】Formik 在空字段上也显示错误

【英文标题】：Formik Showing Error on Empty Field As Well

【发布时间】：2020-08-26 02:21:10

【问题描述】：

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

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

【参考方案1】：

您可以使用setFieldError 或setErrors。

我不确定你到底想在哪里清除错误，但如果不在表单内，你可以获取 formik 组件的 ref 并调用 setFieldError 或 setErrors。

例如

setFieldError('email', undefined)

---

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

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

例如

helpers.setFieldValue('email', '')

【讨论】：

setFieldError 和 setErrors 只能在 Formik 包装器中使用，对吧？如果我将它们与handleSubmit、值等一起传递。那会重置错误吗？

@a125 正如我在回答中所说，您可以在 formik 包装器之外使用 setFieldError 和 setErrors 。如果您对如何获取ref 和调用setFieldError 感到困惑，您可以查看this answer，其中显示了如何调用handleSubmit。在你的情况下是一样的，但不是handleSubmit，你会打电话给setFieldError。