我正在使用 react-hook-form 和 yup ，出于某種原因，它顯示了錯誤的錯誤訊息。
當提交表單時電話號碼輸入為空時，它會顯示 typeError 錯誤訊息而不是“必需”錯誤訊息，我無法理解為什么會發生這種情況，因為輸入欄位為空并且沒有值來確定它是“數字”型別與否。
import { yupResolver } from "@hookform/resolvers/yup";
import { useForm } from "react-hook-form";
import * as yup from "yup";
const schema = yup.object().shape({
name: yup.string().required("Field is required*"),
email: yup.string().email().required("Field is required*"),
phoneNumber: yup
.number()
.required("Field is required*") //this message should be displayed instead of typeError message
.typeError("Value must be a number*"),
message: yup.string().required("Please provide your message*")
});
export default function App() {
const {
reset,
register,
handleSubmit,
formState: { errors }
} = useForm({ resolver: yupResolver(schema) });
const submitForm = (data) => {
console.log(data);
reset();
};
return (
<div className="App">
<form className="contact-form" onSubmit={handleSubmit(submitForm)}>
<h2>Send Us a Message </h2>
<p>
<label for="name">Name</label>
<input name="name" type="text" {...register("name")} />
<p className="error-msg"> {errors.name?.message} </p>
</p>
<p>
<label for="email">Email</label>
<input name="email" type="text" {...register("email")} />
<p className="error-msg"> {errors.email?.message} </p>
</p>
<p>
<label for="phoneNumber">Phone</label>
<input
name="phoneNumber"
type="text"
{...register("phoneNumber")}
/>
</p>
<p className="error-msg"> {errors.phoneNumber?.message} </p>
<input type="submit" id="submit" />
</form>
</div>
);
uj5u.com熱心網友回復：
因為 Yup 收到的是空字串而不是數字，所以它認為您傳遞了錯誤的型別。undefined如果輸入為空，您需要告訴 RHF 回傳：
<input
name="phoneNumber"
type="text"
{...register("phoneNumber", {
setValueAs: (v) => {
return v === "" ? undefined : parseInt(v, 10);
}
})}
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/312737.html