如何解决带有可选字段的验证表单react-hook-forms
我正在尝试处理由两部分组成的表单,其中一部分固定,另一部分由开关显示。
要处理我正在使用的react-hook-form
表单。
我在constants文件夹内的validation.ts文件中定义了一个验证方案。 关于可选部分,我定义了一个子对象,但是它不起作用,并且给出了编译时错误。 因此,我选择了在页面底部的链接中找到的解决方案
尽管我在验证文件中定义了可选的输入字段,但是当我按下“提交”按钮时,它们不会被识别。
如何解决此问题?
在此link上,您可以找到该问题的有效示例。
解决方法
主要问题在于您的组件/表单组件,它有此行
// components/Form.tsx
return child.props.name
? .... : child;
您在这里所做的就是忽略没有name
道具的所有子组件,
就像在渲染组件时一样,将您所做的工作渲染到<></>
内部,请改用以下替代方法。
// in App.tsx
{isEnabled ? <Input name="trailerPlate" placeholder="Targa rimorchio" /> : <></>}
{isEnabled ? <Input name="trailerEnrolment" placeholder="Immatricolazione rimorchio" /> : <></>}
仍然无法进行验证,因为您需要注册组件,并且当前的useEffect
代码不考虑输入字段数的更改。
使用下面的代码代替
React.useEffect(() => {
....
....
},[
register,Array.isArray(children) ?
children.filter(child => child.props.name).length : 0
]
);
我们将name
道具的子组件数用作useEffect的触发器。
最后,当您切换开关时,您还必须unregister
个字段,
以下是示例代码,请根据您的喜好随意更改。
const { handleSubmit,register,setValue,errors,unregister,clearErrors } = useForm<VehicleForm>();
const toggleSwitch = () => {
if (isEnabled) {
unregister('trailerEnrolment');
unregister('trailerPlate');
}
clearErrors();
setIsEnabled(prev => !prev)
};
如果我有帮助,请随时投票。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。