如何从Component中引用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