[英]react-hook-form yup schema useFieldArray validation error message not go away
I want to validate the dynamic form I made using react-hook-form useFieldArray with yup resolver.我想验证我使用 react-hook-form useFieldArray 和 yup 解析器制作的动态表单。
This is how I set up my schema.这就是我设置架构的方式。
const schema = yup.object().shape({
type_of_transports_details: yup.array().of(
yup.object().shape({
count: yup.number().nullable().typeError('Sayısal bir değer giriniz.').required("Taşıma sayısı alanı zorunludur, lütfen giriş yapınız."),
price: yup.number().nullable().typeError('Sayısal bir değer giriniz.').required("Fiyat alanı zorunludur, lütfen giriş yapınız."),
total: yup.number().nullable().typeError('Sayısal bir değer giriniz.').required("Toplam alanı zorunludur, lütfen giriş yapınız."),
})
),
});
const {
control,
register,
handleSubmit,
formState: { errors },
setValue,
getValues,
reset,
setFocus,
clearErrors,
resetField,
setError,
watch,
} = useForm({
resolver: yupResolver(schema),
defaultValues: {
upload_addresses: [{
company_name: "",
code: "",
city: "",
country: "",
address: "",
detail: "",
}],
type_of_the_transport_details: [{
transport_type: "",
count: "",
currency_name: "",
currency_value: "",
price: "",
total: "",
}],
}
});
const {
fields: transportFields,
append: transportAppend,
remove: transportRemove,
update: transportUpdate
} = useFieldArray({
control,
name: "type_of_transports_details",
});
my form我的表格
{
transportFields.map((field, index) => {
return (
<tr key={field.id} style={{ backgroundColor: "#E8EAE6" }}>
<td className="tablelj align-middle">
<label htmlFor="numberOfTransports" className="form-label">{field.type} TAŞIMA TİPİ ÜCRETLERİ</label>
</td>
<td>
<div className="row">
<div className="col-lg col-12">
<input
type="number"
className="form-control"
placeholder="Taşıma Sayısı"
{...register(`type_of_transports_details.count.${index}`)}
/>
{errors?.type_of_transports_details?.[index]?.count?.message}
</div>
</div>
</td>
</tr>
)
})
}
The error messages do not go away even though I enter data.即使我输入数据,错误消息也不会 go 消失。 Besides, it gets stuck in validation even though I submit full data.
此外,即使我提交了完整的数据,它也会卡在验证中。 I can't get rid of validation.
我无法摆脱验证。 When I do clearErrors on the input's onchange, it doesn't respond.
当我对输入的 onchange 执行 clearErrors 时,它没有响应。
using hook-form mode onChange should solve your problem.使用钩子形式模式onChange应该可以解决您的问题。
useForm({
...
mode: 'onChange',
...
)}
You also need to include transportFields in defaultValue too.您还需要在 defaultValue 中包含 transportFields。
defaultValues: {
...,
transportFields: transportFields
}
I changed my input name from this:我从此更改了输入名称:
<input
type="number"
className="form-control"
placeholder="Taşıma Sayısı"
{...register(`type_of_transports_details.count.${index}`)}
/>
to this对此
<input
type="number"
className="form-control"
placeholder="Taşıma Sayısı"
{...register(`type_of_transports_details.${index}.count}`)}
/>
and it worked correctly.它工作正常。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.