我尝试使用react-hook-form的useFieldArray
钩子创建一个动态表单,用户应该能够添加或删除字段,从而使其成为动态表单,我已经从tutorial中获得了灵感,但缺少的部分是如何实现对状态的错误验证,这将是一个对象数组:{email: string}[]
.(该对象将接受更多的键/值对。为了简单起见,我省略了其余的键/值对。)
我试过使用yup
作为验证模式,如下所示:
const schema = yup.array().of(
yup.object().shape({
email: yup.string().email().required(),
}),
)
React钩子形式的实现是:
import * as yup from 'yup'
import { yupResolver } from '@hookform/resolvers/yup'
import { useForm, useFieldArray, Controller } from 'react-hook-form'
const { register, control, handleSubmit, errors } = useForm({
resolver: yupResolver(schema),
mode: 'onChange',
})
const { fields, append, remove } = useFieldArray({
control,
name: 'users',
})
形式或多或少根据教程在上面的链接。
当控制台从useForm
钩子记录error
对象时,它总是给出一个空对象{}
。看起来它不起作用。我可能在这里漏掉了什么。问题是什么?
6条答案
按热度按时间f0ofjuux1#
也许您想使用
context
参数来切换模式?上下文:这个上下文对象是可变的,将被注入到解析器的第二个参数或Yup验证的上下文对象中。
dced5bon2#
import { string, object, array } from 'yup';
lg40wkob3#
我使用
useForm
钩子的resolver属性方法从表单中的一个字段的值中识别应该使用的验证方案。下面的代码适用于我的用例,可能对您有所帮助
im9ewurl4#
我认为你应该指定你的数组名。像这样:
piwo6bdm5#
bmvo0sr56#
我也遇到了同样的问题。我通过参考以下内容更改控制器名称来解决它!
参考链接:https://legacy.react-hook-form.com/api/useform/register-〉规则