React-hook-form with material-ui does not show errors from rules

Question

I'm new to using react-hook-form and after lots of research I stil cannot understand what I'm I doing wrong. I did a sandbox in which I have a simple input number.

How I would like my form to behave : I want the default value (16) to show and I want the errors below the input to show when the number does not respect the given rules (when the number is not between 16-99).

Can someone please help me understand? I'm going crazy! :s

Here is the sandbox link : https://codesandbox.io/s/crazy-northcutt-8wt6p?file=/src/App.tsx

Teguh Suryo Santoso · Accepted Answer · 2021-01-18 08:35:50Z

3

Change the value of TextField's value to render's parameter value. Also add submit button in order the validation work.

I've forked your code for detailed code https://codesandbox.io/s/heuristic-fire-eroqv

answered Jan 18, 2021 at 8:35

Teguh Suryo Santoso

1716 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

davidlagace Over a year ago

Thanks that did the trick! As for the onChange event you made me realised when suggested to add the submit button that my form was validating on submit, the default behavior of react-hook-form. To change this to an "onchange" event handler I simply updated de defaultValues object to mode: :onChange" in the useForm() initialisation!

Collectives™ on Stack Overflow

React-hook-form with material-ui does not show errors from rules

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related