带有可选字段的验证表单

Question

我正在尝试处理由两部分组成的表单，一个是固定的，另一个是通过开关显示的。

处理我正在使用的表单 react-hook-form。

我在常量文件夹内的文件 validation.ts 中定义了一个验证方案。关于可选部分，我定义了一个子对象，但它不起作用并且给出了编译时错误。因此，我选择了您可以在页面底部的 link 中找到的解决方案

虽然我在验证文件中定义了可选的输入字段，但当我按下提交按钮时它们没有被识别。

我该如何解决这个问题？

在此 link 您可以找到问题的工作示例。

Answer 1

主要问题出在您的 components/Form 组件上，它有这一行

// 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)
};

如果我有帮助，请随时点赞。

带有可选字段的验证表单

Validation form with optional fields react-hook-forms

react-native

expo

react-hook-form