Validation is no longer working on useFieldArray fields
See original GitHub issueDescribe 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:
- Go to https://codesandbox.io/s/romantic-ptolemy-nlgcc?file=/src/App.tsx
- Fill out “Test” in "Name
- Fill out “1” in Field 1 and “2” in Field 2
- Notice the form is valid
- Click “Add Row”
- Notice the form is invalid
- Fill out “3” in Field 1 and “4” in Field 2
- 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.
Issue Analytics
- State:
- Created 2 years ago
- Comments:7 (4 by maintainers)
Top Results From Across the Web
useFieldArray - Simple React forms validation
Custom hook for working with Field Arrays (dynamic form). ... This prop is no longer required and will be removed in the next...
Read more >react-hook-form validation not working with custom fields array
It's because you formFields in useState. It runs only one time. Show it already captures errors value i.e first initially value.
Read more >Problem with useFieldArray with react-hook-form - JavaScript
Step of reproducing the bug: Append a few arrays; Remove an array; Append again and you will see in the console that all...
Read more >React Hook Form 7 - Dynamic Form Example with useFieldArray
This is a quick example of how to build a dynamic form with validation in React with version 7 of the React Hook...
Read more >Advanced Usage - Simple React forms validation
It solves the problem where data is passed through the component tree without having to pass props down manually at every level. This...
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
I was able to solve my problem in my application by not using a
<Controller>
around myinput
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.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