Rules not working with Angular and custom bootstrap renderers

Hi! I’m having a problem with JsonForms rules along with Angular and Bootstrap (all in their latest version). The problem is that it doesn’t detect the rules “HIDE”, “DISABLE”… I have tried running the code in jsonforms-editor.netlify.app and it works perfectly, so the problem I think is with the custom renderers, but I’m not sure. I attach the code and the execution in the online editor and in the program that does not work.
I appreciate your response. Thank you very much!

Hi @Luifer,

The evaluation of these rules are expressed via the visible and enabled props handed over to each renderer as part of their bindings. So custom renderers need to:

  • Use the bindings provided by JSON Forms (or implement their own bindings which can evaluate the rules)
  • Respect the visible and enabled props and render their UI accordingly
  • In case they do dispatching they also need to hand over their enabled prop to the dispatcher. This serves as the “parent” enabled indicator

As your control seems to be initially disabled it seems that in general the custom control is behaving correctly. Maybe the controls are not reactive enough? Whenever a data change occurs all renderers should reprocess their bindings and, in case there are changes, then rerender.