Angular Parent Child - 将数据传递给子组件

Question

我们的 angular 应用程序基本上是一个带有上一步和后退按钮的小型工作流。

我们创建了一个组件（用于 Back & Previous）并在所有反应形式中使用它们。父级 component/forms 接受来自用户的输入数据（显示 table ）并且需要在提交表单之前对其进行验证。如果 table.

中不存在单个条目，用户也无法导航

问题是子组件如何知道表单是否有效？

方法：初始化组件时有一个变量isvalid = false，如果有行则将其设置为true。现在，如果用户再次删除所有行，则设置为 false。 是否有比上述方法更好的方法，因为必须为表单中的所有事件管理变量？

Answer 1

angular 中的响应式表单带有 属性 invalid，其中 returns 如果表单无效则为真，如果有效则为假。

您可以将此 属性 传递给子组件并根据您的要求在子组件中使用它。通过这种方式，您没有管理变量的开销，因为 属性 将根据表单验证自动设置。

<app-child-component [isParentInvalid]="ParentForm.invalid">

其中 app-child-component 必须有一个 属性:

 @Input() isParentInvalid: boolean;

Answer 2

forms 有一个 属性 被称为 "statusChanged" 它 returns 一个可观察的。 使用 "statusChanged" 属性 为表单创建一个事件发射器，并在所需的组件中订阅它以检查表单的有效性 statusChanged