-
Notifications
You must be signed in to change notification settings - Fork 974
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[RFC]: FieldError not being populated with server errors when inside Controller when using custom UI components #10737
Comments
I fixed it by making a custom wrapper for the react-hook-form controller like: import { ComponentProps, useContext, useEffect } from 'react'
import {
Controller as ReactHookFormController,
ServerErrorsContext,
useFormContext,
} from '@redwoodjs/forms'
const ServerAwareController = (
props: ComponentProps<typeof ReactHookFormController>
) => {
const { name } = props
const { setError } = useFormContext()
const serverError = useContext(ServerErrorsContext)[name]
useEffect(() => {
if (serverError) {
setError(name, { type: 'server', message: serverError })
}
}, [serverError, name, setError])
return <RedwoodController {...props} />
}
export default ServerAwareController I think this would be nice to have it build it into the framework to able to use with existing |
Works a bit like import { ComponentProps } from 'react'
import {
Controller as RedwoodController,
useErrorStyles,
} from '@redwoodjs/forms'
const ServerAwareController = (
props: ComponentProps<typeof RedwoodController>
) => {
useErrorStyles({ name: props.name })
return <RedwoodController {...props} />
}
export default ServerAwareController My personal opinion is this would make for a very easy and useful wrapper to rhf controller |
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 |
Yeah I have been pretty busy this week, I will get that moving this weekend np |
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: