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 not working properly when using controlled components
See original GitHub issueDescribe the bug By default, validation is triggered during an input change. But if you use controlled component, revalidation does not occur properly.
To Reproduce
Forked your example called Controlled mixed with Uncontrolled Components and added required: true to both of the inputs.
- Submit the form as it is, with empty inputs. You will see two errors.
- Start typing into the input field. Input error should disappear.
- Select an option. Select error stays.
Codesandbox link https://codesandbox.io/s/react-hook-form-controlled-mixed-with-uncontrolled-eg4t3
Expected behavior Select error should have been disappeared as well.
Issue Analytics
- State:
- Created 4 years ago
- Comments:5 (4 by maintainers)
Top Results From Across the Web
React Controlled Input Validation - Stack Overflow
Validation works fine for uncontrolled components. What is the reason for this behavior? export default function App() { const ...
Read more >Uncontrolled Components - React
In a controlled component, form data is handled by a React component. The alternative is uncontrolled components, where form data is handled by...
Read more >How to use React's controlled inputs for instant form field ...
Step 1: Run the validator in render . It's no use having the validate function if we never call it. We want to...
Read more >Instant form field validation with React's controlled inputs
Using controlled inputs implies we are storing all the input values in our state. We can then evaluate a particular condition on every...
Read more >How to Create a React Form: Controlled vs. Uncontrolled ...
In this article, we'll cover two ways to create React forms: the HTML way, with uncontrolled components, and the best practice, with controlled...
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 Free
Top 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
closing now, feel free to ask more questions 😃
looks like you come from angular! you will see some familiar API such as
watch