Invalidate field based on other field
Maybe a stupid question, but what is the best way to invalidate a field if any other form field is switched.
What I mean is: lets assume I have a required field. I chose value. Then I remove it - validation happenes and I see error. But then I switch anpther field in the form and the first field is not required anymore. What is the right way to remove the error that is still there because of first validation run?
11 Replies
extended-salmon•2mo ago
sounds like a use case for Linked Fields
but overall, form level validation would be simpler since it has access to both fields at once
vicious-goldOP•2mo ago
Yes. I tried it. the issue I guess is that structurally one field is a parent to another one - radiobutton group. Which means that I need to listen to radio choice and invalidate based on it. But for some reason Linked Fields with onChangeListenTo does not react to change in such structure.
extended-salmon•2mo ago
do you have a small snippet to explain which fields are currently present?
vicious-goldOP•2mo ago
I have this
vicious-goldOP•2mo ago
even if inside handleRadioChange I will put the value into field the onChange will still be not invoked
extended-salmon•2mo ago
Okay, so this one is a bit of a strange side effect because of two things.
1. How
setFieldValue currently works
2. How linked fields hook onto validators
setFieldValue is a programmatic way to set field states, it does not trigger validation as of v1.14.2. It's used internally a lot, so that's why it's a special case compared to other setters (field.handleChange, field.moveValue etc.). This will likely change in the future, but that's how it currently works.
linked fields listen for the onChange validator event of other fields and trigger themselves as well. Since validation wasn't triggered, this didn't happen.
There's two ways to fix that in your code:
1. use field.handleChange
field.handleChange accepts an updater function, which means previousValue => newValue. If you want to extract some logic outside, then it should be done that way.
2. call form.validateField afterwards
It's the programmatic way to trigger a field change. Not as pretty if you ask me, but it will do the job.
Side note: You seem to have a useState that keeps track of the selected radio value. You can subscribe to form values reactively too:
vicious-goldOP•2mo ago
Hm. I got all the info. Thank you a lot. However I still do not get why RadioGroup does not update the field value in form object just by interaction and I need to use setFieldValue. This is bit confusing.
Now I also tried to reset vield once another radio is chosen. It also works. Are there any cons I need to know while reseting?
extended-salmon•2mo ago
well, it's not hooked up to the field, meaning it's an uncontrolled input
or should I say, it is controlled, but not by the field
vicious-goldOP•2mo ago
I actually added it to the formHook and used as field.RadioGroup. However in this case it was exactly the same
extended-salmon•2mo ago
so assuming that
RadioGroup is supposed to be a field component, then that would mean:
1. It calls const field = useFieldContext<string>() inside. This hooks onto an AppField above if there is one.
2. It controls its state internally. The radio group's value should be field.state.value and onChange should call field.handleChange. Your code snippet suggests this is done externally which makes it not a field component.vicious-goldOP•2mo ago
Ah. Got it. Right. Thank you!