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

Question

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

      <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. 将 validateOnChange 设置为我的状态。

   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>
   

Answer 2

Rohit Thakur的回答给了我一个可行的解决方案，但仍需要稍作更新。

所以我建议还添加以下行以及 validateOnChange。

validateOnBlur: validateAfterSubmit 对于 onClick 方法，您还可以添加

preventDefault()

。

                                    onClick={(e: any) => {
                                        e.preventDefault();
                                        
                                        setValidateAfterSubmit(true);
                                        formik.handleSubmit();
                                    }}

谢谢和欢呼！！