防止 ng-submit 因无效表单而被调用 [重复]答案

【问题标题】：Prevent ng-submit from being called for an invalid form [duplicate]防止 ng-submit 因无效表单而被调用 [重复]
【发布时间】：2013-12-19 22:52:08
【问题描述】：

如果我声明了一个与ng-submit 指令相关联的函数的表单，我如何防止在单击提交按钮但表单无效时执行该函数？

我发现了两个有很大缺点的解决方案，因此我不想使用它们：

将表单传递给控制器：

//HTML
<form ng-submit="myFunc($form, model)">

//JavaScript
$scope.myFunc = function($form, model) {
    if ($form.$valid) {
        //do stuff
    } 
}

这很糟糕，因为它将函数与从表单中调用联系在一起。

当表单无效时禁用提交按钮。
```
<input type="submit" ng-disabled="!form.$valid"/>
```
这很糟糕，因为禁用的元素很难使用。当按钮悬停或单击时，工具提示不会显示，因此很难向尝试单击禁用按钮的用户提供反馈。

这个问题还有其他解决方案吗？

【问题讨论】：

这似乎是一个客观可以回答的问题，确实已经得到了回答。我不明白将其关闭为“主要基于意见”的理由。 OP 显然是固执己见的，有些人可能会争辩说他的“问题”并不是真正的问题，但他仍然不是寻求他人的意见，而是提出一个直截了当的事实问题。我正在投票重新开放。
我的两分钱：反对拥有与处理特定 DOM 事件相关的控制器功能与 AngularJS 的设计理念根本不符。有时您会希望控制器函数采用$event 并对其执行某些操作（例如停止传播或检查点击目标等），在这些情况下，函数纯作为处理程序模式是不可避免的。只需接受它，如果您需要重用逻辑，请将其提取到您的处理程序调用的不同函数中。

标签： forms angularjs

【解决方案1】：

可以这样做：

<form name="myForm" ng-submit="myForm.$valid && myFunc()">

但是在 ngSubmit 本身中检查有效性并没有太大的危害。

【讨论】：

如果您使用 (ngSubmit)="myForm.valid && myFunc()"，则适用于 angular 2

【解决方案2】：

 ng-disabled="regForm.$invalid || regForm.$pending"

希望对你有用

【讨论】：