Question

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

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

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

尽管我在验证文件中定义了可选的输入字段，但是当我按下“提交”按钮时，它们不会被识别。

如何解决此问题？

在此link上，您可以找到该问题的有效示例。

Answer 1

主要问题在于您的组件/表单组件，它有此行

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

如果我有帮助，请随时投票。

带有可选字段的验证表单react-hook-forms

1 个答案: