Question

如果我声明了一个带有与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"/>
```
这很糟糕，因为禁用的元素难以使用。悬停或点击按钮时不显示工具提示，因此很难向尝试单击禁用按钮的用户提供反馈。

这个问题有另一个解决方案吗？

Answer 1

可以这样做：

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

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

Answer 2

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

希望这对你有用

防止因无效表单而被调用

2 个答案: