AngularJS-表单

AngularJS 是一个用于动态 web 应用程序的 JavaScript 框架，它提供了很多工具来创建一个丰富强大的 web 应用程序。表单是 web 应用程序中不可或缺的一部分，AngularJS 提供了丰富的表单指令和服务来帮助我们操作表单。本文将介绍 AngularJS 中常用的表单指令和服务以及它们的使用。

ng-model

ng-model 指令是 AngularJS 中最常用的指令之一，它使表单和应用程序状态之间的双向绑定相当容易。它的使用方法很简单，在一个表单元素中添加 ng-model 指令，然后将它绑定到一个模型对象中的属性。

<input type="text" ng-model="user.name">

angular.module('myApp', [])
  .controller('myCtrl', function($scope) {
    $scope.user = {
      name: ''
    };
  });

在上面的代码片段中，我们创建了一个文本框，将它绑定到 user.name 变量上。这样，每次用户在文本框中输入内容时，user.name 变量的值都会被更新。

ng-model-options

ng-model-options 指令是 ng-model 指令的头等伴侣，它可以通过一些选项来控制 ng-model 指令的行为。例如，我们可以通过设置 debounce 选项来控制输入几毫秒后才将输入绑定到 ng-model 绑定的变量上。

<input type="text" ng-model="user.name" ng-model-options="{debounce: 500}">

angular.module('myApp', [])
  .controller('myCtrl', function($scope) {
    $scope.user = {
      name: ''
    };
  });

这样，用户每次输入内容时，只有在停止输入 500 毫秒后，user.name 变量的值才会被更新。

ng-disabled

ng-disabled 指令可以用来禁用表单元素，使它们不能被用户操作。我们可以将它绑定到一个布尔值变量上，这个变量的值控制表单元素的可用性。

<input type="text" ng-model="user.name" ng-disabled="isDisabled">

angular.module('myApp', [])
  .controller('myCtrl', function($scope) {
    $scope.user = {
      name: ''
    };
    $scope.isDisabled = true;
  });

在上面的代码片段中，我们创建了一个文本框，将它绑定到 user.name 变量上，并且将 ng-disabled 指令绑定到了 isDisabled 变量上，这样用户就无法输入内容到文本框中。

ng-required

ng-required 指令可以用来标记一个表单元素是必填的，如果用户没有填写表单元素，则表单会校验失败，并显示指定的错误提示信息。

<input type="text" ng-model="user.name" ng-required="true" name="name">
<p ng-show="myForm.name.$error.required">该字段不能为空</p>

angular.module('myApp', [])
  .controller('myCtrl', function($scope) {
    $scope.user = {
      name: ''
    };
  });

在上面的代码片段中，我们将 ng-required 指令绑定到了 true 上，标记该文本框为必填的，当用户没有填写任何内容时，表单会校验失败，并且显示一个错误提示信息。

ng-pattern

ng-pattern 指令可以用来标记一个表单元素需要匹配某个正则表达式，如果用户输入的内容不匹配，则表单会校验失败，并显示指定的错误提示信息。

<input type="text" ng-model="user.email" ng-pattern="/^.+@.+\..+$/" name="email">
<p ng-show="myForm.email.$error.pattern">邮箱格式不正确</p>

angular.module('myApp', [])
  .controller('myCtrl', function($scope) {
    $scope.user = {
      email: ''
    };
  });

在上面的代码片段中，我们将 ng-pattern 指令绑定到了一个邮箱地址的正则表达式上，标记该文本框输入的是一个邮箱地址，当用户输入的内容不是一个合法的邮箱地址时，表单会校验失败，并且显示一个错误提示信息。

ng-minlength 和 ng-maxlength

ng-minlength 和 ng-maxlength 指令分别可以用来标记一个表单元素输入的最小长度和最大长度，如果用户输入的内容不符合要求，则表单会校验失败，并显示指定的错误提示信息。

<input type="text" ng-model="user.password" ng-minlength="6" ng-maxlength="12" name="password">
<p ng-show="myForm.password.$error.minlength">密码长度不能小于6位</p>
<p ng-show="myForm.password.$error.maxlength">密码长度不能大于12位</p>

angular.module('myApp', [])
  .controller('myCtrl', function($scope) {
    $scope.user = {
      password: ''
    };
  });

在上面的代码片段中，我们将 ng-minlength 和 ng-maxlength 指令分别绑定到了最小长度和最大长度上，标记该文本框输入的密码需要在 6-12 位之间，当用户输入的密码长度不符合要求时，表单会校验失败，并显示对应的错误提示信息。

ng-submit

ng-submit 指令可以用来捕获表单的提交事件，我们可以在一个表单元素上添加 ng-submit 指令，然后将它绑定到一个表单提交处理函数上。

<form ng-submit="submitForm()">
  <input type="text" ng-model="user.name" name="name" required>
  <input type="password" ng-model="user.password" name="password" required minlength="6" maxlength="12">
  <button type="submit">提交</button>
</form>
<p ng-show="myForm.$invalid">表单校验失败</p>

angular.module('myApp', [])
  .controller('myCtrl', function($scope) {
    $scope.user = {
      name: '',
      password: ''
    };
    $scope.submitForm = function () {
      console.log('表单已提交');
    };
  });

在上面的代码片段中，我们添加了一个 form 元素，并将 ng-submit 指令绑定到了一个表单提交处理函数上。当用户点击表单中的提交按钮时，表单会执行 submitForm 函数，我们可以在这个函数中完成表单的提交操作。

总结

通过本文的介绍，我们学习了 AngularJS 中常用的表单指令和服务，包括 ng-model、ng-model-options、ng-disabled、ng-required、ng-pattern、ng-minlength、ng-maxlength 和 ng-submit。这些指令和服务可以帮助我们更加方便地创建和操作表单，提高我们的工作效率。