如果field1依赖于field2，那么我们如何才能更新field1的错误消息，即使field2在yup中发生了变化并对钩子形式做出了反应。
我用的是反应钩式和yup。我有两个输入字段，一个是select，另一个是输入字段。让我们说，第一个输入是银行的类型，另一个输入号码是帐号。我是这样的验证，根据银行的类型，数字在帐户号码的变化。因为，我使用的是yup，所以我使用yup.when()进行依赖验证。提交表单数据后，验证将在onChange中进行。因此，我的主要问题是，当验证在onChange中时，如果我根据输入更改帐户号，则错误消息正在更改，但是如果我有一个帐户号，并且当我现在更改银行时，帐户号的错误验证消息不会更新。提前谢谢。
我正在附加代码sandBox链接https://codesandbox.io/s/pensive-waterfall-3o4n3q?file=/src/App.js
除了代码沙箱之外，我还添加了代码。
import React from "react";
import * as yup from "yup";
import { yupResolver } from "@hookform/resolvers/yup";
import { useForm } from "react-hook-form";
const schema = yup.object({
account: yup.object({
bank: yup.string().required("*required"),
accountNumber: yup
.number()
.required("*required")
.typeError("Must be a number")
.when("bank", (bank, schema) => {
// console.log(schema);
console.log(bank);
if (bank === "SBI") {
return schema
.min(10000000000, "SBI bank has 11 digits")
.max(99999999999, "SBI bank has 11 digits");
} else if (bank === "HDFC") {
return schema
.min(10000000000000, "HDFC bank has 14 digits")
.max(99999999999999, "HDFC bank has 14 digits");
} else {
return schema
.min(100000000000000, "Andhra bank has 15 digits")
.max(999999999999999, "Andhra bank has 15 digits");
}
})
})
});
export default function App() {
const {
handleSubmit,
register,
formState: { errors }
} = useForm({
resolver: yupResolver(schema),
mode: "onChange",
reValidateMode: "onChange"
});
const submit = (data) => {
console.log("hello");
console.log(data);
};
return (
<div className="App">
<form onSubmit={handleSubmit(submit)}>
<label>
Bank Name
<select {...register("account.bank")}>
<option>Andhra Bank</option>
<option>SBI</option>
<option>HDFC</option>
</select>
<p>{errors.account?.bank?.message}</p>
</label>
<label>
Account Number
<input
type="text"
placeholder="Account Number"
{...register("account.accountNumber")}
/>
<p>{errors?.account?.accountNumber?.message}</p>
{/* <p>{errors.account?.message}</p> */}
</label>
<input type="submit" />
</form>
</div>
);
}如果设置了一家银行并开始编辑帐号，验证时我的问题就会发生，它成功地显示了错误消息。如果银行设置为SBI，我开始编辑帐号和键入号码，错误信息将是"SBI银行有11位数字“，直到我给出11个号码之前，我记得银行不是SBI，所以我将银行名改为Andhra银行，然后根据我的要求，帐号的错误信息应该改为"Andhra bank有15位数”，但它保持不变，因为"SBI银行有11位数“，直到我至少更改了一个帐户号码。
回答 1
Stack Overflow用户
发布于 2022-07-30 02:48:53
我找到了一种方法，通过这样的定制onChange方法来实现这一点
<select {...register('financialInformation.account.bank',{
onChange : (e) => {
setValue('account.bank',e.target.value);
trigger(); }
})}>
<option>Andhra Bank</option>
<option>SBI</option>
<option>HDFC</option>
</select>此外，我还使用了以下代替测试完整解决方案的方法，并且我还附加了沙箱链接https://codesandbox.io/s/infallible-browser-b2dkri?file=/src/App.js。
完整代码是
import React from "react";
import * as yup from "yup";
import { yupResolver } from "@hookform/resolvers/yup";
import { useForm } from "react-hook-form";
const schema = yup.object({
account: yup.object({
bank: yup.string().required("*required"),
accountNumber: yup
.number()
.required("*required")
.typeError("Must be a number")
.when('bank',(bank,schema)=>{
console.log(bank);
if(bank === 'SBI'){
return schema.min(10000000000,'SBI bank has 11 digits').max(99999999999,'SBI bank has 11 digits')
}
else if(bank === 'HDFC'){
return schema.min(10000000000000,'HDFC bank has 14 digits').max(99999999999999,'HDFC bank has 14 digits')
}
else{
return schema.min(100000000000000,'Andhra bank has 15 digits').max(999999999999999,'Andhra bank has 15 digits')
}
})
})
});
export default function App() {
const {
handleSubmit,
register,
trigger,
setValue,
formState: { errors }
} = useForm({
resolver: yupResolver(schema),
mode: "onChange",
reValidateMode: "onChange"
});
const submit = (data) => {
console.log("hello");
console.log(data);
};
return (
<div className="App">
<form onSubmit={handleSubmit(submit)}>
<label>
Bank Name
<select {...register('financialInformation.account.bank',{
onChange : (e) => {
setValue('account.bank',e.target.value);
trigger(); }
})}>
<option>Andhra Bank</option>
<option>SBI</option>
<option>HDFC</option>
</select>
</label>
<br />
<label>
Account Number
<input
type="text"
placeholder="Account Number"
{...register("account.accountNumber")}
/>
<p>{errors?.account?.accountNumber?.message}</p>
{/* <p>{errors.account?.message}</p> */}
</label>
<input type="submit" />
</form>
</div>
);
}https://stackoverflow.com/questions/72715251
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号