adverse-sapphire

Programmatically clear errors on specific (array) fields

Hello again! I'm running into a very specific problem on my TSF app. I created a simplified version of it on StackBlitz so it illustrates my problem a little better: https://stackblitz.com/edit/reset-tsf-errors?file=src%2Findex.tsx I have an array of fields and we can't have duplicate values in there. Whenever we try submitting the form and this rule is not fulfilled, we should highlight which fields are dupes. For example: ✅ GOOD - infos = [1, 2, 3, 4] ❌ ERROR- infos = [1, 2, 1, 4] - 1 is duplicate, so we would highlight positions 0 and 2, saying we can't have duplicate info. (check the image for an illustration) The thing is: let's say I change position 0 to "3". Everything would be fine -> But the submit button is still disabled, because it assumes the index2 is still "wrong", since I haven't changed it. So my question is: Is there a way of resetting the error on other array fields, when I fix one of the incorrect fields? If I could "reset" all array field errors when one of the inputs changes, it would already be very helpful. Thanks in advance! 💙

seab

StackBlitz

Reset TSF errors - StackBlitz

Run official live example code for Form Field Errors From Form Validators, created by Tanstack on StackBlitz

17 Replies

fair-rose•2mo ago

Can you perform the duplicate-check onChange? Maybe you can move the validation to the Form-Level? Combined with this

revalidateLogic({
  mode: 'submit',
  modeAfterSubmission: 'change',
}),

revalidateLogic({
  mode: 'submit',
  modeAfterSubmission: 'change',
}),

https://tanstack.com/form/latest/docs/framework/react/guides/dynamic-validation#revalidation-options

adverse-sapphireOP•2mo ago

That revalidationLogic is the default, which I am using. About the duplicate-check onChange, I really need to have it done onSubmit, because on my app we have the Backend doing more computations around it and returning which fields are erroring. (I used a simple duplicate-check here to simulate a basic Backend validation)

fair-rose•2mo ago

@!seab you'll need to modify the code to match your needs, but you should be able to reset the errors this way I think

adverse-sapphireOP•2mo ago

Thanks for keeping an eye on it! I still couldn't achieve my goal, maybe I'm missing something :/ Sorry for pinging you @Luca | LeCarbonator, but do you have any insight on this? Since you have some context about my form submission and its validation (https://discord.com/channels/719702312431386674/1409497961049755690)

quickest-silver•2mo ago

I‘ll fork the stackblitz and check in a bit :PepeThumbs: is the array simply to have more fields for the sake of an example, or do you also not know what fields are there ahead of time in your use case? the main problem you'll run into is that these errors need additional information to be actually worth something. For example: What happens if I have 3 duplicate data? I clear one and the other two should disappear? Which index to the other two have, and how can I be sure that it's fixed since the remaining ones are still equal?

quickest-silver•2mo ago

in the example itself, that data is around, so one approach would be to pass that error data to the frontend so that it knows what other fields to look out for

adverse-sapphireOP•2mo ago

My backend will tell me that the 3 have an error, yes Our approach would be - as soon as one of them changes, we want to be able to submit again, even if two of them are still erroring - the backend will tell us that We don't know ahead of time - it depends on what the user wants to do - they can configure 1 field or 2 or 3 or etc etc

quickest-silver•2mo ago

in that case, instead of passing multiple errors to each field, you could probably keep it at form level while preserving the field record then get it from form errors using field.name then you don‘t have multiple dependent error instances to manage I suppose meta properties get affected by this though

adverse-sapphireOP•2mo ago

Hmm yeah, I have thought about that as well, I'll talk to the team then! But for future reference, is there a way of clearing a specific field's error?

quickest-silver•2mo ago

setFieldMeta programmatically clear the errorMap

adverse-sapphireOP•2mo ago

Can you provide a small example? I'm not sure I get what you mean Set it to {}?

quickest-silver•2mo ago

after lunch, yeah. Couldn‘t get it working in time, but I forked it so if you wanna change the stackblitz for testing, feel free

adverse-sapphireOP•2mo ago

Thanks a lot Luca! I'll try some things meanwhile! ❤️

quickest-silver•2mo ago

Note to self, would form.validateArrayFieldsStartingFrom work?

adverse-sapphireOP•2mo ago

I'll give it a try. Maybe on the onChange handler

adverse-sapphireOP•2mo ago

That worked wonderfully Luca!!! I'm so happy, thank you so much! I'll still keep an eye on this thread, I'm curious to see if this is the best approach. But it's working very well for me!

quickest-silver•2mo ago

glad to hear! The function was mostly used internally for the array manipulation methods, figured it could help with this example too

Gaming

Programming

Programmatically clear errors on specific (array) fields

Did you find this page helpful?