Как изменить validateOnChange и validateOnBlur в formik на true после первой отправки формы? - PullRequest
Новая
       19

Как изменить validateOnChange и validateOnBlur в formik на true после первой отправки формы?

0 голосов
/ 07 марта 2020

Я новичок в formik и работаю над страницей регистрации с большим количеством полей. Я хочу выполнить все проверки с помощью схемы yup только при отправке. Поэтому я решил изменить значения по умолчанию validateOnChange и validateOnBlur с true на false. Но теперь, когда возникает ошибка проверки после отправки формы, даже после исправления ошибки, ошибка не исправляется, и сообщение об ошибке по-прежнему отображается. Я хочу переключить поведение формы, чтобы превратить validateOnChange и validateOnBlur в true снова после submitCount> 0, т.е. после первой попытки отправки. Но синтаксис и движущиеся части 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>
                .....
...