如何在第一次提交表单后将formik中的validateChange和validateOnLur更改为true

Question

我是formik的新手，一直在开发一个有很多字段的注册页面。我只想在提交时使用yup模式运行我的所有验证。因此，我决定将validateOnChange和validateOnBlur的默认值从true更改为false。但现在，当提交表单后验证出现错误时，即使在更正了错误后，错误也不会得到更正，并且仍然显示错误消息。我想切换表单的行为，在submitCount>0之后，即第一次尝试提交之后，再次将validateOnChange和validateOnBlur设置为true。但是formik的语法和移动部分对我来说并不清楚，所以我正在努力实现它。

https://i.stack.imgur.com/sj5It.png

      <Formik
      initialValues={{
        firstName: "",
        lastName: "",
        email: "",
        company: "",
        password: "",
        confirmPassword: "",
        billingAddress: "",
        city: "",
        postalCode: "",
        country: "",
        state: "",
        countryCode: "",
        phoneNumber: ""
      }}
      validationSchema={SignUpValidation}
      validateOnChange={false}
      validateOnBlur={false}
      onSubmit={(values, formikBag) => {
        console.log('bag', formikBag)
        setTimeout(() => {
          alert(JSON.stringify(values));
          formikBag.setSubmitting(false);
        }, 200);
      }}
    >
      {({ isSubmitting }) => (
        <Form>
          <div className="row mt-5">
            <div className="col-12 col-lg-6">
              <h1 className="inner-h-sm">Personal Info</h1>
              <div className="row">
                <div className="col-12 col-lg-6">
                  <Label>First Name</Label>
                  <Field
                    type="text"
                    name="firstName"
                    component={ReactstrapInput}
                  />
                </div>
                <div className="col-12 col-lg-6">
                  <Label>Last Name</Label>
                  <Field
                    type="text"
                    name="lastName"
                    component={ReactstrapInput}
                  />
                </div>
                <div className="col-12 col-lg-12">
                  <Label>Email</Label>
                  <Field
                    type="email"
                    name="email"
                    component={ReactstrapInput}
                  />
                </div>
                <div className="col-12 col-lg-12">
                  <Label>Company</Label>
                  <Field
                    type="text"
                    name="company"
                    component={ReactstrapInput}
                  />
                </div>
                <div className="col-12 col-lg-6">
                  <Label>Password</Label>
                  <Field
                    type="password"
                    name="password"
                    component={ReactstrapInput}
                  />
                </div>
                <div className="col-12 col-lg-6">
                  <Label>Confirm Password</Label>
                  <Field
                    type="password"
                    name="confirmPassword"
                    component={ReactstrapInput}
                  />
                </div>
                .....

Answer 1

我也有同样的感受-步骤-

1. 创建了状态。

   const [validateAfterSubmit, setValidateAfterSubmit] = useState(false);
   

2. 设置validateOn更改为我的状态。

   const formik = useFormik({
       initialValues: addressDetailsInitialValues,
       validationSchema: addressDetailsSchema,
       enableReinitialize: true,
       validateOnChange: validateAfterSubmit,
       onSubmit,
     });
   

3. 提交时将状态更改为true。

   <Button
         variant="contained"
         color="primary"
         onClick={() => {
                     setValidateAfterSubmit(true);
                     formik.handleSubmit();
                   }}
                 >
                   Save
                 </Button>