Question

在Angular2应用中，我有一个组件（让我们说EditForm），它代表了一个表单，通过它我可以编辑模型的某个实例（让我们说{{1} }）。

有一个页面包含modelInstance个组件的列表，以允许用户在同一页面中查看并可能编辑多个EditForm。

一旦用户退出modelInstance组件（即焦点移动到组件外的某处），我想激发一种检查EditForm组件中包含的数据输入的完整性和正确性的方法用户想要离开（类似EditForm事件但应用于整个组件）。

用例确实预见到页面级别只有一个提交按钮，但我想在任何blur被放弃的任何时候实现检查逻辑。

我目前正在努力寻找一种优雅的方式去做我需要的东西，我担心我会忽略在我面前的简单而整洁的解决方案。任何帮助将不胜感激。

提前致谢

Answer 1

为什么不将你的组件检查方法与ngSubmit（）放在一起，然后决定下一步做什么，甚至停止提交表单。

<form *ngIf="active" (ngSubmit)="onSubmit()" #heroForm="ngForm">

对于Angular2，每个表单元素的数据验证都可以与它绑定。

对于Angular2，您可能需要使用ngControl

上述链接已在评论中收到通知。 新链接： https://angular.io/api/forms/NgControl

如官方文件中所述

使用ngControl跟踪表单控件的更改状态和有效性

例如

this.username = new Control('Default value', Validators.required, UsernameValidator.checkIfAvailable);

可以使用“ngControl”指令在HTML中使用

<input required type=”text” ngControl=”username” />

完整教程，提供有关angular2表单管理方式的示例： https://angular.io/docs/ts/latest/guide/forms.html

上述链接已在评论中通知。 新链接： https://angular.io/guide/forms

查看＆＃34;直播示例＆＃34;来自doc（上面的链接）可以作为测试场景的游乐场。

Answer 2

您可以在您的组件上收听focusout，然后通过迭代其父级来检查document.activeElement是否在您的表单之外，直到您到达当前组件，然后它在里面，或{ {1}}，然后它在外面。

导出类MyForm {

<body>

Plunker example （不包含内部/外部检查）