angular - 如何在超级父组件中访问或检查子组件的模板驱动表单的验证

Question

假设我有一组具有父子关系的组件。结构如下： [A]-->[B]-->[C]-->[D] （即） A 是 B 的父级， B 是 C 的父级， C 是D. 我需要从组件A中检查组件D中模板驱动表单的有效性。我试过使用@viewchild()。在我的componentA.html

<form #mainform ="ngform">
        <button
        [disabled]= "componentB?.ComponentC?.ComponentD?.form?.invalid">
        </button>
        </form>

这种方法行不通。

如何在不使用事件发射器的情况下从 A 到 D 实现这一点？

score -1 · Accepted Answer

它在组件树中嵌套的深度无关紧要。它如何嵌套在表单树中很重要。

假设子控件已命名child，您可以执行以下操作grandchild：grandgrandchild

<form #mainform="ngform">
  <button [disabled]="mainform.control.get('child.grandchild.grandgrandchild').invalid">
    </button>
</form>

我们使用mainform.control来访问底层的FormGroup. 现在我们可以访问FormGroup类上的所有方法。您可以在此处查看完整列表。

接下来我们使用该get方法遍历表单树并到达子控件。

如果您有这样的表单树：

mainform: {
  child: {
    grandchild: {
       grandChild
    }
  }
}

哪里mainform,child和grandchild是FromGroups和grandgrandchild is aFormControl`。

您可以grandgrandchild通过键入以下内容访问：mainForm.get('child.grandchild.grandchild')

1 回答 1