如何在 React Native 中提交 Formik 表单后显示发现错误的警报

Question

我在 react 原生中有一个 Formik 表单和一个 Yup validationSchema。当用户提交表单时，如果有无效字段，我想创建一个带有错误字段的警报。

Dependencies:
"formik": "^1.4.1",
"react": "16.5.0",
"react-native": "0.57.1",

我尝试在 Formik 渲染器中使用 isValid 并创建一个有错误的警报，但我得到一个空的错误对象。但是，如果我提交 again/or 单击提交两次，错误对象将包含预期的无效字段。

如何在第一次提交时获取错误对象？

Answer 1

这是因为在RN 中点击提交按钮时触摸的对象没有更新。尝试将空白值设置为具有验证模式的字段的初始值。像这样：

initialValues={{ input_1: "", input_2: "" }}

来自 formik git 存储库的这个 answer 帮助了我。

Answer 2

你应该做的是有一个模式或类似的东西来显示错误。

当使用 Formik 时，您渲染的组件（您可以使用 component、render 以及 children）将尽可能收到带有错误的道具请参阅 docs.

中的示例

<Formik>                              {// getting the errors here }
  {({ handleSubmit, handleChange, handleBlur, values, errors }) => (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        onChange={handleChange}
        onBlur={handleBlur}
        value={values.name}
        name="name"
      />
      {errors.name &&
        <div>
          {errors.name}
        </div>}
      <button type="submit">Submit</button>
    </form>
  )}
</Formik>

errors 将是一个对象，因此您检查 errors 的 keys（或者您也可以使用 values）并决定是否会呈现错误模态与否。

<Formik
    validationSchema={yourValidationSchema}
    onSubmit={whatYouWantTodoWhenEverythingIsGood}
    initialValues={{ email: '' }}
>                                 
    {({ errors, values, handleChange, handleBlur}) => (
        <View>
            <TextInput
                onChangeText={handleChange('email')}
                onBlur={handleBlur('email')}
                value={values.email}
            />
            <Button onPress={props.handleSubmit} title="Submit" />
            {// checking if you have errors}
            {
                Object.keys(errors).length > 0 && 
                    <Modal errors={errors}/>
            }
        </View>
  )}
</Formik>

根据你的模态来自哪里，你可以使用 <Modal isActive={Object.keys(errors).length > 0} errors={errors}/> 或其他类似的东西。

例如使用 react-native modal

<Modal
    visible={Object.keys(errors).length > 0}
>
        <View>
            {// show the errors the way you want}
        </View>
</Modal>

您应该使用 Object.keys(errors).length > 0 来决定是否应该使用 errors 显示模态。

Answer 3

这是一个确切的答案

        </FieldArray>
        {/* <ErrorMessage name="_action" component="div" /> */}
        <ErrorMessage name="_action">
          {
          (errorMsg) => {
            alert(errorMsg);
            return  <div className="text-danger">{errorMsg}</div>
        }
          }
        </ErrorMessage>

不用我说在哪里添加错误部分吧？ :D

如何在 React Native 中提交 Formik 表单后显示发现错误的警报

How to show an alert with errors found after submitting Formik form in react native

reactjs

react-native

yup

formik