react-hook-form / react-hook-form

📋 React Hooks for form state management and validation (Web + React Native)
https://react-hook-form.com
MIT License
41.46k stars 2.08k forks source link

Validation is no longer working on useFieldArray fields #5234

Closed janhartmann closed 3 years ago

janhartmann commented 3 years ago

Describe the bug After upgrading to 7.X we are now experiencing problems with validation of fields inside useFieldArray.

When adding a new row of fields, the form is invalid no matter if the fields has been filled out correctly. Removing the newly added row, makes the validation true. Only filling out the default row makes the form valid, however, adding two rows and remove the default one makes the form invalid.

To Reproduce Steps to reproduce the behavior:

  1. Go to https://codesandbox.io/s/romantic-ptolemy-nlgcc?file=/src/App.tsx
  2. Fill out "Test" in "Name
  3. Fill out "1" in Field 1 and "2" in Field 2
  4. Notice the form is valid
  5. Click "Add Row"
  6. Notice the form is invalid
  7. Fill out "3" in Field 1 and "4" in Field 2
  8. Notice how the form stays invalid

Codesandbox link (Required) https://codesandbox.io/s/romantic-ptolemy-nlgcc?file=/src/App.tsx

Expected behavior The validation to form on dynamically added fields.

janhartmann commented 3 years ago

I just tried upgrading, and the bug is still there. When adding a new list of fields, the form becomes invalid. Go to https://codesandbox.io/s/romantic-ptolemy-nlgcc?file=/src/App.tsx and change the version to 7.6.2

bluebill1049 commented 3 years ago

https://user-images.githubusercontent.com/10513364/118803854-3a4ccd00-b8e7-11eb-9f0c-fe1f08dae18d.mov

can you share steps to reproduce the issue? (I followed the issue steps)

janhartmann commented 3 years ago

Hi again, I have a hard time reproducing it, but it still fails in my application. Only thing I wonder is that when I add a new row, it becomes invalid because there is a null in the dirty fields?

https://codesandbox.io/s/romantic-ptolemy-nlgcc?file=/src/App.tsx

See the pre at the bottom.

bluebill1049 commented 3 years ago

Thanks @janhartmann i will try again later this weekend, see if I can reproduce this issue. if anyone else having a similar issue, please help to reproduce the problem.

janhartmann commented 3 years ago

I was able to solve my problem in my application by not using a <Controller> around my input field (but registering directly on the input). I dont know if that helps you in any way, but I wanted to let you know. Thanks for an excellent library by the way.

bluebill1049 commented 3 years ago

Thanks @janhartmann interesting... i will take a deeper look this weekend anyhow.

bluebill1049 commented 3 years ago

Couldn't reproduce the issue... I am attaching a unit test for this, and feel free to follow me (anyone) up on this issue, if whoever can reproduce it in a codesandbox.