Question

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

中

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

这种方法不起作用。

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

Answer 1

嵌套在组件树中的深度并不重要。它是如何嵌套在表单树中的。

将子控件命名为child，grandchild和grandgrandchild，您可以执行以下操作：

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

我们使用mainform.control来获取对基础FormGroup的访问权限。现在我们可以访问FormGroup类上的所有方法。您可以看到完整列表here。

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

如果您有这样的表单树：

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

其中mainform，child和grandchild为FromGroups和grandgrandchild is a FormControl`。

您可以输入grandgrandchild

来访问mainForm.get('child.grandchild.grandchild')

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

1 个答案: