如何处理 Angular 表单控件之间的依赖关系？

Question

我正在开发一个 Angular (12) 反应式表单，表单控件值之间有很多直接和间接的依赖关系。 例子： 税率取决于所选国家、日期和所选收据类型，但也可以手动设置。税率的变化触发净额的变化。但也可以手动设置净额，导致毛额发生变化。等等……

我尝试使用表单控件 valueChanges 订阅和控件组件的 on blur 事件来处理这些依赖关系，但这最终会导致一个更改覆盖另一个更改的事件处理程序地狱。

以干净、清晰和可维护的方式处理 Angular 反应式表单控件之间的复杂依赖关系的方法是什么？我找不到合适的例子。

Answer 1

我通过编写自定义验证器解决了类似的输入依赖问题，角度教程称为“向反应式表单添加交叉验证”。

https://angular.io/guide/form-validation#adding-cross-validation-to-reactive-forms

这样做，您可以对验证器进行分组（如果需要），并确保根据用户的选择存在正确的依赖关系树。