Advice on multiple types of validators

[msageryd]

I have a concept outside of RHF which I call "conditions". Conditions are advanced definitions which can lead to many effects, for example altering the layout of the form, hiding fields, showing/hiding icons, etc.

Up until now "conditions" could not lead to form errors. I need to add this capacity. I would end up with a host of different validator types.

Validators leading to form-errors:

1. ordinary synchronous validators (required, min, max, etc)
2. async validators which checks our API for validity (checkUniqueName, etc)

Conditions leading to UI changes
3. ex: (if fieldA = "ABC" then fieldB=hidden) or (if fieldA in ["A","B"] then fieldB=readOnly and fieldB.value="XYZ")

Conditions leading to formErrors
4. ex: (if fieldA = "ABC" then fieldB=required)

Case 4 is new to me and I'm seeking advice on how to implement this. I fugure I could go two ways:
4a: add a validator to fieldB so this field is handled with the regular rules-engine in RHF
4b: let my condition-engine create errors on its own via setError.

Solution 4a seems more robust, as I wouldn't need to take care of clearing the errors etc. But I have no clue if this is possible.

BTW. the condition-engine is implemented via useWatch. The result of the condition parsing is saved in an object which is passed to my form items via context so each item can take action (i.e. hide itself, show an icon, etc).

Thanks in advance.

[msageryd]

I'm rubber-ducking some.. Here is a thought:
Would it be of any benefit to implement the "external error" handlig via a resolver?

If I could inject the result from my condition-engine into the resolvers context argument, the resolver could use this result and generate apropriate errors. A possible advantage would be that I wound't need to care about setError nor clearing the errors (which I actually don't know where and when it should happen).

I cannot find any way to populate he context argument. Maybe this is not possible?

[msageryd]

So.. this is frustrating. I have tried some idéas but none succeedes.

---

I tried to call setError from within my condition-engine. Here is some psuedo code for this:

const WatchCondition = () => {
  const value = useWatch({control, name})

  useEffect(()=> {
     parse_and_test_conditions();
     if(someConditionIsTriggered) {
       setError(name, { type: 'condition', message: 'Condition triggered' });
    }
  }, 
  [value]);
}

This doesn't work at all.
From what I can understand the setError will only work on registered fields, is this true? (my fields are not registered)
Even if I would register my fields, setError would not work if any of my field rules passes, according to this: https://www.react-hook-form.com/api/useform/seterror/

I might have misunderstood something. But I'm totally lost. How can I set a manual error based on some values in an object I have access to via context and get the error to persist so my form becomes invalid?

---

I also tried to create a custom validator, but such functions are only fed with (value, values). How can I get hold of an up-to-date version of my conditions object from context?

---

I also tried to build a custom resolver. But the resolver needs to be defined before useForm and I cannot find a way to get hold of my conditions object at this stage.

[msageryd]

Some progress...

I am now able to use setError from within my WatchCondition component. But sometimes a condition can lead to errors in multiple fields.

How can I force a rerender of other fields that the currently edited. The error is correctly added to the errors object from formState. But the affected field is rendered with the previous state of errors. I am destructuring formState (also tried with fieldState from useController) in order to trigger a subscription, but I have probably done something wrong.

Q: How can I assure that every affected field gets rerendered when changes occur in errors?