如何解决"termsOfUse must be a boolean type, but the final value was: "on"."使用 Ionic、React、Yup 和解析器

Question

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

termsOfUse 必须是 boolean 类型，但最终值为："on".

我认为这意味着我正在尝试将字符串值 'on' 保存到 yup 字段中，这需要一个布尔值。这是因为复选框传递的是 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

对于本机复选框，register 调用就足够了：

<input
  type="checkbox"
  {...register("nativeCheckbox")}
/>

但是当您使用外部受控组件 <IonCheckbox /> 时，您需要使用 Controller 组件：

<Controller
  control={control}
  name="checkbox"
  render={({ field: { value, onChange } }) => (
    <IonCheckbox
      checked={value}
      onIonChange={({ detail: { checked } }) => onChange(checked)}
    />
  )}
/>

在文档中查看此 section 以获取更多信息。

如何解决"termsOfUse must be a boolean type, but the final value was: "on"."使用 Ionic、React、Yup 和解析器

How to solve "termsOfUse must be a boolean type, but the final value was: "on"." using Ionic, React, Yup and Resolvers

typescript

reactjs

ionic-framework

yup

react-hook-form