reactjs - 如何使用 Ionic、React、Yup 和 Resolvers 解决“.”上的 "termsOfUse must be a boolean type, but the final value was: "

Question

我想创建一个注册表，其中所有字段都是必需的。我正在使用 React Hook Form 和 Yup 进行表单验证。 所有字段均为必填字段，包括两个复选框。 当我提交表单时，我收到以下复选框错误:

termsOfUse 必须是 boolean 类型，但最终值为:"on"。

我认为这意味着我正在尝试将字符串值“on”保存到 yup 字段中，这需要一个 bool 值。这是因为复选框传递的是 target.value 而不是 target.checked: {...register("privacyPolicy")}

我仍然不知道如何传递“checked”而不是“value”并在 RHF 中使用复选框输入。 任何帮助将非常感激。谢谢:)

组件:

import React from "react";
import { useHistory } from "react-router-dom";
import { useState } from "react";
import {
  IonPage,
  IonHeader,
  IonToolbar,
  IonTitle,
  IonContent,
  IonButton,
  IonInput,
  IonLabel,
  IonItem,
  IonLoading,
  IonToast,
  IonSelectOption,
  IonSelect,
  IonRadio,
  IonCheckbox,
  IonGrid,
  IonRow,
  IonCol,
  IonAlert,
} from "@ionic/react";
import { useForm } from "react-hook-form";
import { yupResolver } from "@hookform/resolvers/yup";
import * as yup from "yup";
import axios from "axios";

// form validation rules
const validationSchema = yup.object().shape({
  email: yup
    .string()
    .email("E-mail is invalid!")
    .min(7, "E-Mail must have 7 characters")
    .required("E-Mail is required"),
  password: yup
    .string()
    .min(8, "Password should have at least 8 characters!")
    .required("Password is required"),
  termsOfUse: yup
    .boolean()
    .oneOf([true], "You should accept terms of use"),
  privacyPolicy: yup
    .boolean()
    .oneOf([true], "You should accept privacy policy"),
});

const CreateAccountPage: React.FC = () => {
 
  const [checkedTermsOfUse, setCheckedTermsOfUse] = useState(false);
  const [checkedPrivacyPolicy, setCheckedPrivacyPolicy] = useState(false);

  const history = useHistory();

  const {
    register,
    handleSubmit,
    formState: { errors },
    getValues,
  } = useForm({
    mode: "onChange",
    resolver: yupResolver(validationSchema),
  });

  const doCreateAccount = () => {
    const data = {
      eMail: getValues("email"),
      password: getValues("password"),
    };

    axios
      .post("xx/register", data)
      .then((response) => {
        return response.data;
      })
  };

  return (
    <IonPage>
      <IonHeader>
      </IonHeader>
      <IonContent className="ion-padding">
           
          <form
            className="ion-padding"
            onSubmit={handleSubmit(doCreateAccount)}
          >
          
            <IonItem>
              <IonLabel position="floating">E-Mail *</IonLabel>
              <IonInput type="email" {...register("email")} />
            </IonItem>
            {errors.email && <p>{errors.email.message}</p>}
            
            <IonItem>
              <IonLabel position="floating">
                Password *
              </IonLabel>
              <IonInput type="password" {...register("password")} />
            </IonItem>
            

            <div>
              <IonCheckbox
                checked={checkedTermsOfUse}
                {...register("termsOfUse")}
              ></IonCheckbox>{" "}
              <a
                href="https://wss-rest.api.woehlke.de/type/agreement-version-content/1"
                target="_blank"
              >
                I accept terms of use
              </a>
            </div>
            {errors.termsOfUse && <p>{errors.termsOfUse.message}</p>}

            <div>
              <IonCheckbox
                {...register("privacyPolicy")}
                checked={checkedPrivacyPolicy}
              ></IonCheckbox>{" "}
              <a
                href="https://wss-rest.api.woehlke.de/type/agreement-version-content/3"
                target="_blank"
              >
                I accept privacy policy
              </a>
            </div>
            {errors.privacyPolicy && <p>{errors.privacyPolicy.message}</p>}

            <IonButton type="submit">Submit</IonButton>
            <IonButton onClick={() => history.goBack()} color="danger">
              CANCEL
            </IonButton>
          </form>
      </IonContent>
    </IonPage>
  );
};

export default CreateAccountPage;

"@hookform/resolvers": "^2.4.0",
"react-hook-form": "^7.1.1",
"yup": "^0.32.9"

Answer 1

试试这个<Field type="checkbox" name="policy" :value="false" />

添加在:value="false"之前田野后面

policy : yup.boolean().oneOf([true],"your message"),