我应该在表单中使用Ng-submit还是ng-click？

Question

我想知道在使用提交按钮时是更倾向于使用ng-click还是ng-submit？我的假设是我们应该在所有表单上使用ng-submit，在非表单元素上使用ng-click。

我知道以下列出的差异： - ng-submit允许用户在聚焦在表单上时按回车键，而ng-click则不行。 - ng-click可用于任何元素，而ng-submit只能应用于表单元素。

我想知道是否还有其他需要添加到这个列表中的内容，因为我想了解在angular项目中的常规做法。

- MaxwellLynn

---

几乎相同的问题：https://dev59.com/7WAg5IYBdhLWcg3wdq0y - Sk. Tajbir

谢谢，我已经阅读过了。但我希望有人能给我更详细的信息。 - MaxwellLynn

我认为使用ng-submit的原因之一是当在表单中按下回车键时，它会触发。 - fhollste

Answer 1

如果我们希望表单无效时不要提交，那么我们需要在表单本身上使用ng-submit指令，而不是在按钮上使用ng-click。

     <div class="row">
            <form name="adduser" ng-submit="AddUser(adduser.$valid)">                   
                <div id="name-group" class="form-group-lg">
                    <input type="text"
                           required
                           name="name"
                           ng-model="userfullName"
                           class="form-control"
                           placeholder="Full Name">
                </div>

在ng-submit中，我们使用一个参数formname.$valid从控制器调用AddUser函数。只有当表单有效或者说所有用户输入都有效时，这个提交函数才会被调用。请记住，在这种情况下，如果表单无效，则不会提交表单。

当我们使用ng-click时，即使表单无效也会提交表单。对于ng-click的两个观察结果如下：

1. 即使表单无效，我们仍然能够提交表单
2. 对于无效的输入，控制器中的值将被设置为未定义

- debugmode

---

这里有一个很好的观点。但是你也可以通过scope.adduser在控制器中获取表单的范围，然后在控制器中进行验证。不过我想你的意思是使用ng-submit就不需要在控制器中进行任何验证了。 - MaxwellLynn

这就是我的观点。使用ng-submit，我们不必在控制器内手动进行任何验证。 - debugmode

Answer 2

从经验来看，对于使用 Angular 和 Ionic 的移动应用程序，我使用 ng-click，因为即使表单无效，移动键盘箭头（Android）或 GO（iOS）仍然可用并且仍会提交。我必须使用 ng-click 来避免验证问题。

在 Web 上，我使用 ng-submit，只是因为像你说的那样，它会在按下回车键时提交。

- Greg

---

嗯，有趣。如果你的Web应用程序是响应式的并且可以在移动设备上运行呢？ - MaxwellLynn

然后我也会使用 ng-click。如果你的表单中有 ng-submit，那么在设备上你会得到箭头和“GO”按钮。如果你使用 ng-click，那么你只能看到数字和字母。可能有一些解决方法我不知道，但这只是我的经验 :) - Greg

我读过，如果同时使用这两个，表单将被提交两次，也许在我们的情况下使用ng-click会更好。 - MaxwellLynn