在触发取消按钮之前激活了角形验证 [英] Angular form validation activated before cancel button is triggered

问题描述

我正在尝试在模式对话框中创建一个带有验证的小表格. 该对话框具有一个取消按钮，该按钮应隐藏该对话框:

I am trying to create a little form with validation inside a modal dialog. The dialog has a cancel button which should hide the dialog:

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

I've created a small project to verify it:

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

名称字段具有一个验证，如果该名称保留为空，则会触发该验证.显示对话框时，输入字段将成为焦点.

The name field has a validation which is triggered if the name is left empty. The input field gets focus when the dialog is shown.

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

The problem is now pressing cancel without entering any text.

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

The validation kicks in before the button's click handler is triggered. The result is that the error message is displayed. This moves the cancel button down and the click goes to nirvana.

您可以通过单击取消按钮的顶部来验证此行为. 如果单击底部，一切都会按预期进行(除了我不希望完全不显示验证消息).

You can verify this behavior by clicking the top part of the cancel button. If you click the bottom part everything works as expected (except that I would prefer not to show the validation message at all).

所以...我想要拥有的东西:

So... what I'd like to have:

如果用户则触发验证

• 通过按Tab键离开字段
• 单击下一个字段(在其他具有更多字段的对话框中)
• 点击确定/创建指标
• 更改字段内容

如果用户未触发，则不会触发

Trigger no validation if user

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

推荐答案

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

I have faced same issue. The workaround I made on cancel button is, use (mousedown) instead of (click) to dismiss the model.

这篇关于在触发取消按钮之前激活了角形验证的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！