Forms 在触发“取消”按钮之前激活角度形状验证

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

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

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

现在的问题是在不输入任何文本的情况下按“取消”

验证在触发按钮的单击处理程序之前开始。结果显示错误消息。这会向下移动取消按钮，点击进入涅盘

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

所以。。。我想要的是：

如果用户

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

如果用户

• 单击“取消”
• 在对话框外单击

---

我认为您的问题在于错误标签中的条件

访问输入后，将触发触摸的属性。 更改输入后，将触发属性dirty

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

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

---

您可以在官方文档中了解有关表单的更多信息：

我也遇到过同样的问题。我在

取消

按钮上所做的解决方法是，使用

（鼠标向下）

而不是

（单击）

来关闭该模型。

您好，对-这是一个选项-但在测试之后。。。这不是我想要的。我已经更新了上面的文本。现在的问题是，如果您通过单击外部/按tab键离开该字段，您将不会得到任何反馈……类似的问题表明，这可能以任何形式发生，而不仅仅是在模式内部：我也有同样的问题。我尝试过在取消按钮上执行type=“reset”和type=“button”，但这并不能解决问题。问题是，在为“取消”按钮触发单击处理程序之前，会在字段的模糊事件上触发验证。这是不可访问的，当用户使用空格或enter时，（mousedown）将不起作用。如果采用这种方法，请确保同时添加按键操作。同时使用

（鼠标向下）

和

（单击）

。