[Solved] How to handle dependencies between Angular form controls?

MatterOfFact Asks: How to handle dependencies between Angular form controls?
I’m developing an Angular (12) reactive form with lots of direct and indirect dependencies between the form control values. Example: The tax rate is dependent on the selected country, the date and the selected receipt type, but it can also be set manually. Changes of the tax rate trigger changes to the net amount. But the net amount can also be set manually with leads to changes of the gross amount. And so on…

I tried to handle these dependencies with the form control valueChanges subscriptions and with on blur events of the control components, but this ends in an event handler hell where one change overwrites the other.

What is the way to handle complex dependencies between Angular reactive form controls in a clean, clear and maintainable way? I couldn’t find a suitable example for this.

Ten-tools.com may not be responsible for the answers or solutions given to any question asked by the users. All Answers or responses are user generated answers and we do not have proof of its validity or correctness. Please vote for the answer that helped you in order to help others find out which is the most helpful answer. Questions labeled as solved may be solved or may not be solved depending on the type of question and the date posted for some posts may be scheduled to be deleted periodically. Do not hesitate to share your response here to help other visitors like you. Thank you, Ten-tools.