我正在React中构建一个用于创建烹饪食谱的组件。我正在使用react-hook-form来验证表单。我的容器上有两个表格。一种用于添加成分，具有三个输入字段（名称、数量、单位），另一种用于步骤 - 具有一个输入字段。当我添加成分或步骤时，我正在验证输入数据是否正确，并阻止将项目添加到列表中，如果数据不正确，列表位于此表单下方。到目前为止，一切都很好。但我的问题是，我需要使用页面底部的通用“添加配方”按钮来访问这两个表单的验证过程。例如，如果我将那些需要的输入字段留空，我也想通过按下“添加配方”按钮来检查，而不仅仅是提交这两个“子表单”。这是要点的链接：. 有人可以看看我的代码并给我一个建议。
PS.：我创建了 FormGroupArray 组件，用于动态添加 FormGroup 元素数组（我正在使用 react-bootstrap）。