Formik 如何在表单提交时显示错误

Question

1. 尝试在表单提交时验证字段。 （同时，onblur 和 onchange 也必须处于活动状态） 但是当我将字段留空并提交表单时。它不会给出任何错误。

这怎么可能？

2. 我的第二个问题是；当我将值发布到我的其余 api 时。它可能会返回 400 错误，我想将这些错误用于我的验证字段。这是我的 api 响应：

   { "msg": "缺少必填字段", “错误”：{ “姓名”： [ “验证。需要” ], “国家”： [ “验证。需要” ], “城市”： [ “验证。需要” ] } }

必须让姓名字段、城市和国家字段出现验证错误。这怎么可能？

    <Formik
        initialValues={values}     
        enableReinitialize={true}
        validationSchema={ProductEditSchema}
        validateOnChange={true}
        validateOnBlur={true}
        onSubmit={(values) => {     
          saveLocation(values);
        }}
        >
......
            <Button
              size="large"
              className={classes.button}
              variant="contained"
              color="secondary"      
              onSubmit={() => handleSubmit()}        
            >
              {intl.formatMessage({ id: "GENERAL.SUBMIT" })}
            </Button>
          </Form>
          </>
        )}
      </Formik>

Answer 1

嗯，Formik 不会自动为您处理验证，您需要自己完成此操作。您可以编写自己的验证，这很烦人，或者您可以使用

Yup

并创建一个验证模式，您可以将其传递到 Formik 表单中（它们支持 Yup 验证模式）。

您基本上为数据创建一个验证模式，如下所示：

let schema = yup.object().shape({
  name: yup.string().required(),
  age: yup.number().required().positive().integer(),
  email: yup.string().email(),
  website: yup.string().url(),
  createdOn: yup.date().default(function () {
    return new Date();
  }),
});

然后，您可以将模式作为 prop 传递给 Formik 组件：

<Formik
  validationSchema={schema}
  onSubmit={(values) => {
    //Check here if your data is valid
  }}
/>

这是 Yup 的 Github 页面。

这里是 Formik 文档 的一部分，解释了如何集成 Yup 和验证（请参阅

validationSchema

）。

Answer 2

我刚刚注意到，您可以将

formik.submitCount

属性与可以保存在状态上的先前值进行比较。一旦您检查两者不同，您就可以触发事件，然后使用当前的 formik.submitCount 更新本地状态变量。通过此实现，您可以继续验证更改或模糊。