question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Validation is no longer working on useFieldArray fields

See original GitHub issue

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.

Issue Analytics

  • State:closed
  • Created 2 years ago
  • Comments:7 (4 by maintainers)

github_iconTop GitHub Comments

1reaction
janhartmanncommented, May 20, 2021

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.

1reaction
janhartmanncommented, May 19, 2021

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

Read more comments on GitHub >

github_iconTop 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 >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found