Comments (7)
@fenos Hello! The issue you're facing is the fact that when you return the remix errors from the backend they are consumed internally by the hook until they are cleared in the useActionData
(eg you submit again). This means that there is no way to remove the errors via form.clearErrors, but this should not indeed be the case but should be cleared. I will make a patch for this when I get the time and this behavior should remove it so this is definitely not the way it should work. Until then I could recommend that you check if the error that comes from the hook is the same as the be one and clear it like that by using useActionData
and handling the errors that way
from remix-hook-form.
Any progress on this? I have just come across the same issue. If you have a recommend solution I can implement it for you.
from remix-hook-form.
Any progress on this? I have just come across the same issue. If you have a recommend solution I can implement it for you.
@Centerworx i think the solution is to have a simple setState that is set to true on submit and false on reset and depending on that it consumes the be errors
from remix-hook-form.
@AlemTuzlak Working on it. There is an issue around useActionData return the value before submit true is set. Even though it is set to true before calling submit handler. But this may just be test implementation issue.
from remix-hook-form.
@AlemTuzlak I have the fix done and tested. I'm having an issue pushing it. Problem with my git.
from remix-hook-form.
Hi, first of all, thanks to @AlemTuzlak for making remix-hook-form. I used usePrevious in the project to get the difference of serverErrors and then merged it, which temporarily solved the problem.
const errors = data?.errors || emptyErrors
const [serverErrors, setServerErrors] = React.useState(() => errors)
const previousServerErrors = usePrevious(serverErrors)
const formErrors = React.useMemo(() => {
const keys = Object.keys(serverErrors)
const prevKeys = previousServerErrors ? Object.keys(previousServerErrors) : []
const deletedErrorKeys = prevKeys.filter((key) => !keys.includes(key))
const localErrors = methods.formState.errors as FieldErrors<Output>
const mergedErrors = mergeErrors<Output>(localErrors, serverErrors, validKeys)
for (const key of deletedErrorKeys) {
delete mergedErrors[key]
}
return mergedErrors
}, [methods.formState.errors, previousServerErrors, serverErrors, validKeys])
React.useEffect(() => {
if (isSubmitting) {
setServerErrors(emptyErrors)
} else {
// Only update the server errors if the form is not submitting
setServerErrors(errors)
}
}, [errors, isSubmitting])
from remix-hook-form.
Is there any progress on this? I just run into the same issue.
from remix-hook-form.
Related Issues (20)
- Number validation fails HOT 3
- submitData string issue HOT 5
- [suggestion] Implicit Inference of Form Schema in `getValidatedFormData` and `validateFormData` HOT 7
- `formState.isSubmitting` is `true` when the loaders are refetching HOT 8
- Property 'root' does not exist on type HOT 7
- Form State isDirty not resetting after submit HOT 1
- Could not parse content as FormData HOT 1
- Remix Hook Form File Upload HOT 1
- 'mode' does not exist in type 'UseRemixFormOptions' HOT 3
- getValidatedFormData auto parse JSON cause error if value is JSON string HOT 3
- reset method does not accept options
- TypeScript: Return type of useRemixForm hook is incorrect. HOT 6
- Have to set stringifyAllValues: false else all strings are double quoted HOT 2
- (bug): Remix hook form is not behaving as expected or documented HOT 5
- Form Reset On Success HOT 1
- File Upload With Other Form Data - Question HOT 16
- remix-hook-form not compatible with 7.51.0 of react-hook-form
- When using Link to navigate to other pages, isSubmitting is also true, which is not as expected.
- Allow `encType: "application/json"` from `submitConfig`
- Multiple forms on a single page HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from remix-hook-form.