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

Question

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

这怎么可能？

我的第二个问题是；当我将值发布到我的其余 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
  }}
/>

这是Github page for Yup .

这是 Formik's documentation 的一部分这解释了如何集成 Yup 和验证(请参阅 validationSchema)。