在触发取消按钮之前激活角度表单验证

Question

我正在尝试在模态对话框中创建一个带有验证的小表单。 该对话框有一个取消按钮，应该隐藏对话框：

我已经创建了一个小项目来验证它：

https://embed.plnkr.co/jF202JGxI0f7BjeKhL7A/

名称字段具有验证，如果名称为空，则触发验证。显示对话框时，输入字段将获得焦点。

问题是现在按下取消而不输入任何文字。

在触发按钮的点击处理程序之前，验证就会启动。结果是显示错误消息。这会移动取消按钮，然后点击进入必杀技。

您可以点击取消按钮的顶部来验证此行为。 如果你单击底部部分，一切都按预期工作（除了我不想显示验证消息）。

所以......我想拥有的东西：

如果用户

，则触发验证

• 按Tab键离开该字段
• 点击下一个字段（在包含更多字段的其他对话框中）
• 点击确定/创建指标
• 更改字段内容

如果用户

，则不会触发验证

• 点击取消
• 在对话框外点击

Answer 1

我认为您的问题存在于错误标签中。

在访问输入时触发触摸的属性。 输入更改后会触发属性脏。

因此，您需要删除触摸的条件，尝试使用以下代码替换错误标签代码：

<label *ngIf="myForm.controls.name.errors && myForm.controls.name.dirty">

您可以在官方文档中了解有关表单的更多信息：https://angular.io/guide/forms

Answer 2

我遇到了同样的问题。我在cancel按钮上所做的解决方法是，使用(mousedown)而不是(click)消除模型。