如何从组件中获取对 Angular 内置 ControlGroup 的引用？

Question

我有一个包含模板驱动表单的组件。我真正想做的是向 routerCanDeactivate 方法添加代码以检查表单是否为 pristine，如果不是，则在继续导航之前警告用户。我知道 Angular 采用模板驱动形式并构建了一个 ControlGroup。在模板中，我可以这样访问它：<form #hf="ngForm" ...> 有没有办法从组件中引用它？如果这不可能，是否有另一种方法可以通过 routeCanDeactivate 检查表单是否脏？谢谢你的帮助。

Answer 1

正在准备表格

每个控件需要添加ngControl

<input ngControl="someName" ...>

和ngControlGroup到输入和<form>元素之间的每个元素

<div ngControlGroup="groupName">

通过 NgForm 指令收集和管理您的表单控件。

引用表格

如果您的模板中只有一个表单，您可以使用

@ViewChild(NgForm) formA;

获取对表单的引用，否则将模板变量添加到表单

<form ngForm #formA="ngForm">

并使用

获取参考

@ViewChild('formA') formA;

然后您可以检查 pristine 状态，例如

routerCanDeactivate() {
  return this.form.pristine;
}

Plunker example

如何从组件中获取对 Angular 内置 ControlGroup 的引用？

How to get reference to Angular built ControlGroup from within a Component?

angular2-forms

angular