如果输入字段卸载react钩子表单，如何删除验证架构

Question

我有一个表单，它将使字段具有条件。我使用react钩子表单来验证表单。

案例1:如果用户选中复选框，字段firstName将显示firstName的所需填充值。然后用户可以提交表单。

案例2:如果用户未选中复选框，表单无法提交，因为它仍然属于验证模式

这是我的代码：https://codesandbox.io/s/unregister-react-hook-form-j7bim6?file=/src/App.js:0-1587

我希望如果用户不选中复选框，用户仍然可以提交没有字段firstName的表单。我尝试使用shouldUnregister: true，但它没有删除对firstName输入的验证。如果删除验证模式，一切正常，但我需要验证表单，因此无法删除验证模式

Answer 1

您还需要在模式中使firstName依赖于showFieldFirstName。检查下面更新的架构，在代码框中正常工作。

...
const SignupSchema = yup.object().shape({
  firstName: yup.string().when("showFieldFirstName", {
    is: true,
    then: yup.string().required()
  })
});
...