AngularJS 表单

AngularJS 提供了强大的表单处理功能，使得开发者可以轻松地创建表单，并对表单进行验证、提交等操作。在本章中，我们将详细介绍 AngularJS 表单的使用方法。

创建表单

要创建一个表单，首先需要在 HTML 中定义一个 form 元素，并使用 ng-app 和 ng-controller 指令来指定 AngularJS 应用和控制器。

<form ng-app="myApp" ng-controller="myCtrl">
  <input type="text" ng-model="name" required>
  <input type="email" ng-model="email" required>
  <button ng-click="submitForm()">Submit</button>
</form>

在上面的示例中，我们定义了一个包含两个输入框和一个提交按钮的表单。输入框分别用 ng-model 指令绑定了 name 和 email 变量，required 属性表示这两个输入框为必填项，提交按钮则使用 ng-click 指令绑定了 submitForm 方法。

表单验证

AngularJS 表单提供了丰富的验证功能，可以通过 ng-required、ng-minlength、ng-maxlength、ng-pattern 等指令对表单进行验证。

<input type="text" ng-model="username" ng-minlength="3" ng-maxlength="10" required>

在上面的示例中，我们对一个输入框进行了最小长度和最大长度的验证。当用户输入的字符长度小于3或大于10时，表单将自动显示错误信息。

表单提交

要提交表单数据，可以在控制器中定义一个 submitForm 方法，并在该方法中处理表单数据的提交操作。

app.controller('myCtrl', function($scope) {
  $scope.submitForm = function() {
    if ($scope.name && $scope.email) {
      // 处理表单提交逻辑
    }
  };
});

在上面的示例中，我们在 myCtrl 控制器中定义了 submitForm 方法，并对 name 和 email 变量进行了验证。只有当这两个变量都有值时，才会执行表单提交逻辑。

总结

AngularJS 表单提供了丰富的功能，包括创建表单、表单验证和表单提交等操作。通过合理地运用这些功能，我们可以轻松地开发出功能强大的表单应用。在下一章节中，我们将继续介绍 AngularJS 的其他功能。