AngularJS 表单学习笔记

AngularJS 表单由以下三部分组成：

Input Controls：输入控件，比如输入框、复选框、单选框等。
Validation：验证，会检查表单的输入是否符合我们期望的规则。
$dirty 和 $pristine：AngularJS 会跟踪我们的表单，如果用户改过任何一个值，就会判断表单为 $dirty，否则为 $pristine。

Input Controls

AngularJS 中定义表单的方式与 HTML 标准相似，不同之处是我们需要使用 ng-model 来为元素创建数据双向绑定。当用户在输入框中输入数据时，使用了ng-model指令后，这个值将被自动同步到表单的模型中。

htmlCopy Code
<form>
  <label>
    名字:
    <input type="text" ng-model="user.name" required>
  </label>
  
  <label>
    邮箱:
    <input type="email" ng-model="user.email" required>
  </label>
  
  <button type="submit">提交</button>
</form>

Validation

AngularJS 提供了一些内置的验证器指令，可以用来校验用户输入的值是否符合我们预期的规则。下面是一些常见的验证器指令：

required：该验证器确保表单控件非空，如果为空，则显示错误信息。
ng-minlength：该验证器确保表单控件的输入文本（字符串）超过指定长度。
ng-maxlength：该验证器确保表单控件的输入文本（字符串）不超过指定长度。
pattern：该验证器通过使用正则表达式验证输入是否符合指定的模式。

这里是一个使用 required 验证器的范例：

htmlCopy Code
<form>
  <label>
    名字:
    <input type="text" ng-model="user.name" required>
    <span ng-show="myForm.name.$error.required">名字不能为空</span>
  </label>
  
  <label>
    邮箱:
    <input type="email" ng-model="user.email" required>
    <span ng-show="myForm.email.$error.required">邮箱不能为空</span>
    <span ng-show="myForm.email.$error.email">邮箱格式不正确</span>
  </label>
  
  <button type="submit">提交</button>
</form>

在上面的范例中，我们使用了 ng-show 指令来根据控件状态显示或隐藏错误信息，例如，如果用户名输入框为空，即 myForm.name.$error.required 为 true，则会显示“名字不能为空”的错误信息。

$dirty 和 $pristine

AngularJS 会跟踪我们的表单，如果用户改过任何一个值，就会判断表单为 $dirty，否则为 $pristine。

htmlCopy Code
<form name="myForm">
  <label>
    名字:
    <input type="text" ng-model="user.name" required>
    <span ng-show="myForm.name.$error.required && myForm.name.$dirty">名字不能为空</span>
  </label>
  
  <label>
    邮箱:
    <input type="email" ng-model="user.email" required>
    <span ng-show="myForm.email.$error.required && myForm.email.$dirty">邮箱不能为空</span>
    <span ng-show="myForm.email.$error.email && myForm.email.$dirty">邮箱格式不正确</span>
  </label>
  
  <button type="submit" ng-disabled="myForm.$invalid">提交</button>
</form>

在上面的例子中，我们使用了 myForm.$invalid 判断表单是否为无效状态。如果表单是无效的，即 $dirty 为 true 而同时又有至少一个验证器指令没有通过，则 ng-disabled 指令会禁用提交按钮。这个技巧对于防止用户发送无效的表单数据很有用。

实例

下面是一个完整的实例，展示了如何创建一个带有验证功能的注册表单：

htmlCopy Code
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>AngularJS 表单学习笔记</title>
  <script src="https://cdn.bootcdn.net/ajax/libs/angular.js/1.8.2/angular.min.js"></script>
</head>
<body ng-app="">
  <h2>注册</h2>

  <form name="registrationForm" novalidate>
    <label>
      姓名:
      <input type="text" ng-model="name" name="name" required>
      <span ng-show="registrationForm.name.$error.required && registrationForm.name.$dirty">请填写姓名</span>
    </label>

    <label>
      邮箱:
      <input type="email" ng-model="email" name="email" required>
      <span ng-show="registrationForm.email.$error.required && registrationForm.email.$dirty">请填写邮箱</span>
      <span ng-show="registrationForm.email.$error.email && registrationForm.email.$dirty">邮箱格式不正确</span>
    </label>

    <label>
      密码:
      <input type="password" ng-model="password" name="password" ng-minlength="8" required>
      <span ng-show="registrationForm.password.$error.required && registrationForm.password.$dirty">请填写密码</span>
      <span ng-show="registrationForm.password.$error.minlength && registrationForm.password.$dirty">密码至少需要 8 个字符</span>
    </label>

    <button type="submit" ng-disabled="registrationForm.$invalid">注册</button>
  </form>
</body>
</html>

当用户提交表单时，如果有任何一个控件没有通过验证，提交按钮就会被禁用，同时错误信息会在每个控件下方显示出来。