Forms 如何构造一个子组件来执行自己的验证，而无需重新设计轮子？

我觉得这是一件非常常见的事情，但我在Angular文档或其他地方找不到关于什么是最佳实践的任何指导

情境：我有一个父组件，它使用反应式表单对其数据执行验证。其中一个子组件是具有10多个附加输入、复选框和单选按钮的组件。该子组件也用于应用程序的另一部分（其另一父组件使用

ngModel

与该子组件进行数据绑定），因此，我希望在通过

ngModel

或

formControlName

更新子组件的父数据时，子组件能够执行自己的验证检查并相应地显示错误消息（但是父组件希望如此）。一旦在子组件中实现了

ControlValueAccessor

，所有这些都可以工作

我陷入困境的地方：因为子组件正在执行自己的验证，所以当父组件使用被动表单时，子组件的有效性应该反映在父表单中

以下是我看到的两个选项：

（子FormGroup）子组件使用反应式表单本身，使用

formControlName

进行数据绑定，使用

FormBuilder

和

Validators

进行干净表单控件实例化和验证逻辑

（手动验证）子组件使用

ngModel

将其控制值绑定到数据，并实现

Validator

接口。每个字段都需要自己的“验证”方法，通过

（ngModelChange）

调用该方法来运行有效性逻辑，必要时显示错误消息，等等。这感觉就像我在做很多逻辑，这些逻辑被认为是通过使用反应形式抽象出来的，只是感觉很混乱，因为我们需要为每个字段使用一个验证方法，一个跟踪每个字段有效性的组件变量似乎不能提供一种干净的方法来在以后需要时添加额外的控件，而且似乎很容易出错。我看到一些建议，其中提到我可以通过

@Input（）

将父窗体传递到子组件，但这将迫使子窗体的父窗体实现被动窗体，这是一个我认为没有必要的限制，因为组件不应该关心它们的父对象是什么——它们的工作是显示数据和处理数据更改

我想选择选项1，但我对父组件“查看”子组件数据的有效性有问题。我做了一个简单的决定

---

StackBlitz注释：Form1组件使用上述选项1，Form2组件使用上述选项2。您可以在Form1Component的formGroup部分看到我遇到的问题-导致子表单无效（通过清除

文本或选择空

选项）也不会导致父表单无效。相反，在Form2Component部分中使子组件无效会导致父窗体无效，但由于上述原因，这并不是一种“正确”的方法。有什么想法吗？

Form1Component中的表单按其应有的方式工作？在Form1Component的formGroup部分：如果子组件无效，则认为父组件仍然有效，并允许提交。这就是问题所在。

Form1Component

中的表单按其应有的方式工作？在Form1Component的formGroup部分：如果子组件无效，则父组件仍被视为有效，并允许提交。这就是问题所在。