You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
I am using a react ui library with an Input component. For me to use the lib component I need to use the Controller element. This way I am able to add client validation and pass the props down to my custom component. This works and the client errors show, but then the server errors for the input name doesn't
For example:
<Controllername="code"rules={{ ... }}render={({ field,formState: { error, invalid }})=>(// ❌ Here the error is client only. Invalid as well<div><MyAwesomeUIInput{...field}/><FieldErrorname="code"/> // ✅ Client errors ❌ Server errors
</div>)}/>
Compared to
<NumberFieldname="code"validation={{ ... }}/><FieldErrorname="code"className="rw-field-error"/>// ✅ Client errors ✅ Server errors
When the NumberField (or any other type of field) is present, the field is correctly populated. I understant that this is intented behaviour. But would be nice for the controller to pick up server error as well to pass to the custom input
How do we reproduce the bug?
No response
What's your environment? (If it applies)
No response
Are you interested in working on this?
I'm interested in working on this
The text was updated successfully, but these errors were encountered:
dac09
changed the title
[Bug?]: FieldError not being populated with server errors when inside Controller
[RFC]: FieldError not being populated with server errors when inside Controller when using custom UI components
Jun 7, 2024
Thank you @irg1008 again for raising an interesting issue, and for the solution here.
I am not a forms expert, but the solution you've suggested here seems quite reasonable. Can you think of a case where you wouldn't want the error styles coming through in a controller?
i.e. Does it make sense to change the export of Controller to be ServerAwareController
What's not working?
I am using a react ui library with an Input component. For me to use the lib component I need to use the
Controller
element. This way I am able to add client validation and pass the props down to my custom component. This works and the client errors show, but then the server errors for the input name doesn'tFor example:
Compared to
When the NumberField (or any other type of field) is present, the field is correctly populated. I understant that this is intented behaviour. But would be nice for the controller to pick up server error as well to pass to the custom input
How do we reproduce the bug?
No response
What's your environment? (If it applies)
No response
Are you interested in working on this?
The text was updated successfully, but these errors were encountered: