Javascript 用于构建可重用控件的模式，这些控件可以根据其运行的上下文工作？

请参考图片

三个大的黑色矩形是我的三种不同形式。在我的应用程序中，它们属于3种不同的上下文。 红色框是所有3个窗体上的控件。 但是，红框的可见性和允许值、验证规则等取决于某些其他控件的可见性和/或用户在其上的表单上输入的值。例如，在第一种形式中，可见性将根据绿色控件的可见性而变化。在另一种形式上，红色框中允许的值取决于蓝色列表控件中选择的值，依此类推

我应该如何处理红色控件的值/状态/验证

一种选择是在每个表单中嵌入一个逻辑。但这将导致到处重复代码

国家模式是一种选择吗？如果是，那么red控件的服务器端逻辑必须处理所有上下文？当绿色或蓝色控件中的值发生变化时，该逻辑如何知道

我希望有一个可重用的红色文本框，在使用它的每个上下文中都能以所需的方式运行

在这种情况下，我应该使用哪种模式？如果我在更改表单上的每个控件gree、blue等时调用服务器端逻辑，只是为了计算红框的可见性/值，那么考虑到性能，这是一个好的选择吗

我有一个ASP.NET应用程序

---

红色控件是说明性的。这可能是更复杂的控件或控件集。

最佳解决方案是使用支持此设计的现有框架之一。 比如说

角度2/4 脊梁骨 Vue

---

还有很多其他的，但有了这些，我的经验和作品对我来说是完美的

请说明你否决这个问题的原因。