Angularjs 在表单操作URL无效和使用表单操作URL时防止表单提交

我有一个设置了URL

action

set的表单。当

form.$invalid

为

true

（或

form.$valid

为

false

）时，我想使表单不提交到URL，并在UI中显示无效表单错误

在我这里的特殊情况下，我使用的框架为我提供了一个角度控制器，我没有能力在它上面添加/修改函数！我只需要对模板进行更改就可以做到这一点

以下是我到目前为止所做的（简化）

需要用户名！
登录

我在网上看到的很多东西都是这样说的

ng submit=“form.$valid&&model.myCustomSubmitFn（）”

---

但是它没有使用URL表单

操作

，我也没有能力在这个框架中添加自定义函数

下面的答案对这个问题不起作用——我只是把它留在这里，所以没有其他人尝试将其作为解决方案

在这种情况下对你有用吗

<button type="submit" ng-disabled="form.$invalid">Sign In</button>

登录

下面的答案对这个问题不起作用——我只是把它放在这里，这样就没有其他人尝试将其作为解决方案了

在这种情况下对你有用吗

<button type="submit" ng-disabled="form.$invalid">Sign In</button>

登录

这当然是一个棘手的情况，因为您只能编辑模板。我没有看到一个“角度”的方式来解决你的问题，能够编辑控制器。不过幸运的是，这可以通过一些普通JavaScript在模板中单独解决

尝试在按钮中添加一个

onclick

事件处理程序，如果表单的输入与验证条件不匹配，该处理程序将阻止表单提交

<button type="submit" onclick="if(form.username.value.length < 1) { event.preventDefault(); }">Sign In</button>

登录

---

我对这个解决方案并不感到非常自豪，如果表单中有多个输入，它肯定会变脏，但是它看起来是解决不幸情况的唯一办法。

这肯定是一个棘手的问题，因为您只能编辑模板。我没有看到一个“角度”的方式来解决你的问题，能够编辑控制器。不过幸运的是，这可以通过一些普通JavaScript在模板中单独解决

尝试在按钮中添加一个

onclick

事件处理程序，如果表单的输入与验证条件不匹配，该处理程序将阻止表单提交

<button type="submit" onclick="if(form.username.value.length < 1) { event.preventDefault(); }">Sign In</button>

登录

我并不为这个解决方案感到自豪，如果表单中有多个输入，它肯定会变得脏兮兮的，但是它看起来是解决您不幸情况的唯一办法。

在ng submit的上下文中，Angle传递了。因此调用

$event.preventDefault（）

。您的

ng提交将更改为

<form novalidate
      name="form"
      ng-attr-action="{{model.loginUrl}}"
      ng-submit="form.$invalid && $event.preventDefault();form.$submitted=true;"
      >



请参见。
ng submit上下文中的角度传递。因此调用
$event.preventDefault（）
。您的
ng提交将更改为

<form novalidate
      name="form"
      ng-attr-action="{{model.loginUrl}}"
      ng-submit="form.$invalid && $event.preventDefault();form.$submitted=true;"
      >



参见。
反应形式
如果您想在反应式表单的HTML中说明这一点，您可以简单地执行如下操作：

…

因此，您要做的是将
（ngSubmit）
设置为三元运算符，比较将是
formGroupVar.valid
，如果为true，则执行submitFunc（），否则为null

注意：没有理由不在TypeScript文件中这样做，尽可能保持HTML的“干净”是有意义的，但这并不意味着这是不可能的
 反应形式
如果您想在反应式表单的HTML中说明这一点，您可以简单地执行如下操作：

…

因此，您要做的是将
（ngSubmit）
设置为三元运算符，比较将是
formGroupVar.valid
，如果为true，则执行submitFunc（），否则为null

注意：没有理由不在TypeScript文件中这样做，尽可能保持HTML的“干净”是有意义的，但这并不意味着这是不可能的
 这样做会使按钮不可用，因此表单在无效时将永远无法提交。由于我只想在尝试提交时显示有关无效表单项的消息，这样做会使验证消息永远不会显示。@ChrisBarr--啊，我明白了--这是一个棘手的问题。更新了我的答案，表明它是无效的，但我会留下它，让新访问者对你的问题有更多的历史背景。你的更新与巨大的文本使我哈哈大笑-谢谢你的输入！哈哈哈，没问题。“我本应该发表评论而不是发布答案，但我有点骄傲了。”我在上面的第一篇评论中解释道。它会阻止表单提交，但这不是我想要做的，它不会提供我想要的用户体验。这样做会使按钮无法使用，因此表单在无效时将永远无法提交。由于我只想在尝试提交时显示有关无效表单项的消息，这样做会使验证消息永远不会显示。@ChrisBarr--啊，我明白了--这是一个棘手的问题。更新了我的答案，表明它是无效的，但我会留下它，让新访问者对你的问题有更多的历史背景。你的更新与巨大的文本使我哈哈大笑-谢谢你的输入！哈哈哈，没问题。“我本应该发表评论而不是发布答案，但我有点骄傲了。”我在上面的第一篇评论中解释道。它会阻止表单提交，但这不是我想要做的，它不会提供我想要的用户体验。当用户按下enter键时，这会起作用吗？这似乎只有在用户用鼠标按下按钮时才会起作用。当用户按下enter键时，这会起作用吗？好像是