我有一个问题，我的形式，使用formik.我不知道这个问题是从formik或yup.如果谷歌自动填写的形式，我仍然会得到验证错误，如名字是必需的.但如果我取消可能是一封信，它就消失了.
我的验证模式为：

const validationSchema = yup.object().shape({
  firstName: yup.string().required("first name is required"),
  surname: yup.string().required("surname name is required"),
  email: yup
    .string()
    .email("email is badly formatted")
    .required("email address is required"),
  phoneNumber: yup.number().required("phone number is required"),
  password: yup
    .string()
    .required("password is required")
    .min(6, "minimum of 6 characters"),
});

我的注册.tsx

<Formik
            initialValues={{
              firstName: "",
              surname: "",
              email: "",
              phoneNumber: "",
              password: "",
            }}
            onSubmit={(data, { setSubmitting }) => {
              setSubmitting(true);
              setTimeout(() => {
                console.log(data);
                setSubmitting(false);
                navigate("/login", "forward", "push");
              }, 4000);
            }}
            validationSchema={validationSchema}
          >
            {({
              values,
              handleSubmit,
              handleBlur,
              handleChange,
              touched,
              errors,
              isSubmitting,
            }) => (
              <Form onSubmit={handleSubmit}>
                <div className="ion-margin-bottom">
                  <div className="ion-margin-bottom">
                    <IonItem className="form-label ion-no-padding">
                      <IonLabel position="floating" className="fw-light">
                        First Name
                      </IonLabel>
                      <IonInput
                        type="text"
                        name="firstName"
                        onIonChange={handleChange}
                        onIonBlur={handleBlur}
                        value={values.firstName}
                      ></IonInput>
                      <IonIcon
                        slot="end"
                        color="#718096"
                        icon={personOutline}
                      />
                    </IonItem>
                    {errors.firstName && touched.firstName ? (
                      <span className="error-text">{errors.firstName}</span>
                    ) : null}
                  </div>

                  <div className="ion-margin-bottom">
                    <IonItem className="form-label ion-no-padding">
                      <IonLabel position="floating" className="fw-light">
                        Surname
                      </IonLabel>
                      <IonInput
                        type="text"
                        name="surname"
                        onIonChange={handleChange}
                        onIonBlur={handleBlur}
                        value={values.surname}
                      ></IonInput>
                      <IonIcon
                        slot="end"
                        color="#718096"
                        icon={personOutline}
                      />
                    </IonItem>
                    {errors.surname && touched.surname ? (
                      <span className="error-text">{errors.surname}</span>
                    ) : null}
                  </div>

                  <div className="ion-margin-bottom">
                    <IonItem className="form-label ion-no-padding">
                      <IonLabel position="floating" className="fw-light">
                        Email Address
                      </IonLabel>
                      <IonInput
                        type="email"
                        name="email"
                        onIonChange={handleChange}
                        onIonBlur={handleBlur}
                        value={values.email}
                      ></IonInput>
                      <IonIcon slot="end" color="#718096" icon={mailOutline} />
                    </IonItem>
                    {errors.email && touched.email ? (
                      <span className="error-text">{errors.email}</span>
                    ) : null}
                  </div>

                  <div className="ion-margin-bottom">
                    <IonItem className="form-label ion-no-padding">
                      <IonLabel position="floating" className="fw-light">
                        Phone Number
                      </IonLabel>
                      <IonInput
                        type="text"
                        name="phoneNumber"
                        onIonChange={handleChange}
                        onIonBlur={handleBlur}
                        value={values.phoneNumber}
                      ></IonInput>
                      <IonIcon slot="end" color="#718096" icon={callOutline} />
                    </IonItem>
                    {errors.phoneNumber && touched.phoneNumber ? (
                      <span className="error-text">{errors.phoneNumber}</span>
                    ) : null}
                  </div>

                  <div className="ion-margin-bottom">
                    <IonItem className="form-label ion-no-padding">
                      <IonLabel position="floating" className="fw-light">
                        Password
                      </IonLabel>
                      <IonInput
                        name="password"
                        id="password"
                        value={values.password}
                        onIonBlur={handleBlur}
                        onIonChange={handleChange}
                        type={showVal.showPassword ? "text" : "password"}
                      ></IonInput>
                      <IonIcon
                        onClick={() =>
                          setShowVal({
                            ...showVal,
                            showPassword: !showVal.showPassword,
                          })
                        }
                        slot="end"
                        color="#718096"
                        icon={showVal.showPassword ? eyeOutline : eyeOffOutline}
                      />
                    </IonItem>
                    {errors.password && touched.password ? (
                      <span className="error-text">{errors.password}</span>
                    ) : null}
                  </div>

                  <div className="ion-margin-top">
                    <IonButton
                      className="h-btn mt2"
                      type="submit"
                      expand="block"
                      fill="solid"
                      color="primary"
                      disabled={isSubmitting}
                    >
                      {isSubmitting ? (
                        <IonSpinner name="bubbles" />
                      ) : (
                        "create Account"
                      )}
                    </IonButton>
                  </div>
                </div>
              </Form>
            )}
          </Formik>

不确定IonInput是否与formik tho不兼容