AngularJS 中的 ng-submit：处理表单提交示例
詹姆斯·哈特曼
AngularJS ng-submit 指令
此 提交 AngularJS 中的指令用于将应用程序绑定到浏览器的提交事件。因此，在 AngularJS 在提交事件中，您可以在控制器本身内部执行一些处理，然后将处理后的信息显示给用户。
版本说明： AngularJS 1.x 已于 2021 年 12 月 31 日停止长期支持，框架团队确认了这一点。 AngularJS 支持正式结束 此版本于 2022 年 1 月发布，因此不会再发布任何版本或安全补丁。以下每个步骤和代码块均按原样保留，作为历史参考。新的工作应使用现代 Angular，其表达的理念与此相同。 （ngSubmit）绑定到 FormGroup.
如何使用 ng-submit 在 AngularJS 中提交表单
网页上信息提交的过程通常由 Web 浏览器上的提交事件处理。此事件通常用于将用户可能在网页上输入的信息发送到服务器进行进一步处理，如登录凭据、表单数据等。信息提交可以通过 GET 或 POST 请求完成。
让我们以 Angular 表单提交示例来了解如何在 AngularJS 中提交表单。
在我们的 AngularJS 表单提交示例中，我们将向用户显示一个文本框，用户可以在其中输入想要学习的主题。页面上会有一个提交按钮，按下该按钮会将主题添加到无序列表中。
下图 trac从文本框中输入的主题，通过提交按钮，到附加到其下方的列表项，整个过程是流畅的。
AngularJS 表单提交示例
现在，我们将看到一个使用 ng-submit 指令从 Controller 提交 AngularJS 表单的示例：
<!DOCTYPE html>
<html>
<head>
<meta chrset="UTF 8">
<title>Event Registration</title>
</head>
<body ng-app="sampleApp">
<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script src="lib/bootstrap.js"></script>
<script src="lib/bootstrap.css"></script>
<h1> Guru99 Global Event</h1>
<div ng-controller="AngularController">
<form ng-submit="Display()">
Enter which topic you would like to learn
<input type="text" ng-app="sampleApp" ng-model="Topic"><br>
<input type="submit" value="Submit"/>
<ul ng-repeat="topicname in AllTopic">
<li>{{topicname}}</li>
</ul>
</form>
</div>
<script>
var sampleApp = angular.module("sampleApp",[]);
sampleApp.controller("AngularController",function($scope) {
$scope.AllTopic=[];
$scope.Display = function () {
$scope.AllTopic.push($scope.Topic);
}
});
</script>
</body>
</html>
Code 说明：
- 首先，我们声明表单的 HTML 标签，它将包含“文本框”和“提交按钮”控件，如 Angular 表单提交事件示例中所示。然后，我们使用 AngularJS 的 ng-submit 指令将“Display()”函数绑定到表单。该函数将在控制器中定义，并在表单提交时调用。
- 我们有一个文本控件，用户可以在其中输入他们想要学习的主题。这将绑定到名为“Topic”的变量，该变量将在我们的控制器中使用。
- AngularJS 中有一个普通的提交按钮，用户输入他们想要的主题后会点击该按钮。
- 我们已经使用了 ng-重复 指令显示用户输入的主题列表项。ng-repeat 指令遍历数组“AllTopic”中的每个主题并相应地显示主题名称。
- 在我们的控制器中，我们声明了一个名为“AllTopic”的数组变量。它将用于保存用户在步骤 2 中输入的所有主题。
- 我们正在定义 Display() 函数的代码，该函数将在用户单击“提交”按钮时被调用。在这里，我们使用推送数组函数将用户通过变量“Topic”输入的主题添加到我们的数组“AllTopic”中。
如果 AngularJS 表单示例代码成功执行，则在浏览器中运行代码时将显示以下输出。
输出：
要查看代码运行，首先在文本框中输入主题名称（如上所示），然后单击“提交”按钮。
- 单击提交按钮后，您将看到在文本框中输入的项目已添加到项目列表中。
- 这是通过 Display() 函数实现的，当按下提交按钮时会调用该函数。
- Display() 函数将文本添加到名为“AllTopic”的数组变量中。我们的 ng-repeat 指令将遍历数组变量“AllTopic”中的每个值，并相应地将它们显示为列表项。
ng-submit 与 ng-click：使用哪一个
以上皆是 AngularJS 指令 可以调用同一个控制器函数，但它们监听的是不同的浏览器事件。 ng-submit 坐在 <form> 它会标记并响应提交事件，因此当用户在字段中按下 Enter 键时，它也会触发。 ng-click 它位于按钮上，仅对鼠标点击或等效激活做出反应。
| 方面 | 提交 | ng-点击 |
|---|---|---|
| 宿主元素 | 表单标签 | 任何可点击元素 |
| 活动已收听 | 提交，包括回车键 | 仅点击 |
| 默认浏览器 POST | 被指令压制 | 仍然会从提交按钮触发 |
| 访问表单状态 | 读取表单控制器中的 $valid 和 $invalid 值 | 没有自身的任何形式背景 |
| 自然贴合 | 将表单数据传递给控制器 | 工具栏按钮、链接、模态触发器 |
键盘支持通常是决定性因素。一种带有键盘的表单 ng-click 单独使用时会忽略回车键，这会让填写登录框的用户感到沮丧。保留 ng-click 对于非表单提交的操作，例如清除字段或打开对话框。
为什么 ng-submit 会阻止浏览器默认提交
一个普通的 HTML 表单在收到提交事件时，会将其字段序列化，并请求浏览器加载一个新页面，该新页面会丢弃表单中保存的所有值。 $scope。 该 ng-submit 指令阻止这种情况发生：它调用 preventDefault() 对你来说，表达式会运行，当前页面保持不变。没有 $event 无需进行参数传递，也无需手动调用。
抑制作用有一个有据可查的条件。根据…… ngSubmit 参考只有当表单不包含任何内容时，才会阻止默认操作。 action, data-action or x-action 属性。添加其中任何一个，处理程序完成后，浏览器都会像往常一样导航，这对于渐进增强型服务器渲染表单来说是正确的行为，但在其他任何地方都会令人意外。
因为该指令会吞噬事件对象，所以需要从属性中读取提交的值。 ng模型 写入作用域，或者显式传递它们，例如： ng-submit="Display(Topic)".
如何在执行 ng-submit 之前验证表单
上面的示例接受空主题，因为没有任何程序会先检查文本框。AngularJS 会为每个命名表单创建一个表单控制器，该控制器会公开用于控制表单提交的标志。添加 novalidate 因此，浏览器会关闭自身的 HTML5 气泡功能，并且 AngularJS 也无法正常工作。 表格验证 接手。
- 给表格一个
nameAngularJS 会在周围环境中发布一个同名控制器。 调节器 范围。 - 添加
novalidate将表单标签改为允许原生浏览器验证，这样就不会干扰表单的运行。 - 使用以下方式标记字段
required,ng-minlength,ng-maxlengthorng-pattern. - 保护处理者
$valid并将表单控制器传入，以便该函数可以检查各个字段。 - 禁用该按钮
ng-disabled指向$invalid它可以立即提供视觉反馈。
<form name="topicForm" ng-submit="topicForm.$valid && Display(topicForm)" novalidate> <input type="text" name="Topic" ng-model="Topic" required> <input type="submit" value="Submit" ng-disabled="topicForm.$invalid"> </form>
该模式中报告的大部分问题都归因于两个错误：
- Double 提交。 捆绑
ng-click在提交按钮上ng-submit表单上的处理程序会运行两次，每次事件运行一次。官方文档警告不要合并这两个处理程序，所以只能选择其中一个。 - 意外提交。 表单内的任何按钮
type="button"触发提交事件。请显式标记取消和重置按钮，否则它们也会触发该事件处理程序。
守卫 $valid 这只是一种便利措施，并非安全控制措施。数值在存储之前仍然需要在服务器上重新验证。
