AngularJS表单的错误处理

我们已经讲解能在在表单层面检验的多种类型验证,但个别字段呢?在前面的示例中,我们确保输入字段都是必填字段,username的最小长度是4个。我们还能做什么?表4-2包含了AngularJS的一些内置验证。

表4-2. AngularJS内置的验证器
验证器 描述
required 正如前面所讨论的那样,这确保字段是必需的,字段标记为无效,直到填写。
ng-required 与required不同,这标志着字段也是必需的,ng-required指令允许我们基于控制器布尔条件标记输入字段为必需。
ng-minlength 该指令可以设定输入文本值的最小长度
ng-maxlength 该指令可以设定文本输入值的最小长度
ng-pattern 作为这个指令的一部分,文本输入的有效性可以针对指定的正则表达式模式进行检查。
type=”email” 文本输入内置电子邮件验证。
type=”number” 带有数量验证的文本输入。也可以有最小和最大值的附加属性。
type=”date” 如果浏览器支持,显示一个HTML日期选择器。否则,默认为一个文本输入。ng-model
绑定到日期对象。预计日期格式为yyyy-mm-dd(例如2009-10-24)。
type=”url” 带有输入验证的URL文本输入。

此外,我们可以编写自己的验证器,我们将在后面章节这个问题。

显示错误消息

我们能用这些验证器做些什么呢?当然可用来检查表单的有效性,并相应地禁用保存或更新按钮。但是我们也要告诉用户错在哪里、如何修正。AngularJS提供两种方案来解决这个问题:

  • 模型准确反映表单错误是什么,我们可以使用它来显示更友好的错误消息。
  • 自动从每个字段添加和删除的CSS类允许我们的突出表单错误。

首先让我们看一看如何根据错误对象显示特定的错误消息,看下面的例子:

<html ng-app="notesApp">
<head><title>Notes App</title></head>
<body ng-controller="MainCtrl as ctrl">
  <form ng-submit="ctrl.submit()" name="myForm">
    <input type="text"
       name="uname"
       ng-model="ctrl.user.username"
       required
       ng-minlength="4">
    <span ng-show="myForm.uname.$error.required">
      This is a required field
    </span>
    <span ng-show="myForm.uname.$error.minlength">
      Minimum length required is 4
    </span>
    <span ng-show="myForm.uname.$invalid">
      This field is invalid
    </span>
    <input type="password"
       name="pwd"
       ng-model="ctrl.user.password"
       required>
    <span ng-show="myForm.pwd.$error.required">
      This is a required field
    </span>
    <input type="submit"
       value="Submit"
       ng-disabled="myForm.$invalid">
  </form>
<script src="https://cdn.jsdelivr.net/angularjs/1.2.28/angular.min.js"></script>
<script type="text/javascript">
  angular.module('notesApp', [])
    .controller('MainCtrl', [function() {
      var self = this;
      self.submit = function() {
        console.log('User clicked submit with ', self.user);
      };
    }]);
</script>
</body>
</html>

在本例中控制器中没有做任何改变。相反,我们可以只需要关注表单的HTML。让我们看看表单改变子什么:

  1. 首先,我们为需要验证的两个输入字段添加了name属性,用户名文本命名为uname,pwd密码文本命名为pwd。
  2. 然后使用AngularJS的表单绑定能够为每个表单字段找出错误。当我们为任何输入表单添加name属性时,实际上专门为它创建了带有错误状态的模型。
  3. 所以对于用户名字段,我们可以通过访问myForm.uname$error.required来检验它有没有填写。同样对于ng-minlength,字段应该是myForm.uname.$error.minlength。对于密码,我们通过myForm.pwd.$error.required来检验该字段是否填写。
  4. 类似于表单,我们也通过myForm.uname.$invalid访问输入状态。我们早些时候讲述的其他所有表单状态($valid、 $pristine和$dirty)也同样适用于myForm.uname对象。

通过模型,现在只有当某种类型的错误触发时才显示一个错误消息。上表中的每一个验证器公开了错误对象的相应键。因此,我们可以把它找到并将特定的错误消息显示给用户。需要显示给用户名那个字段是必需的吗?然后当用户开始打字时,显示了输入的最小长度,最后当输入超过最大长度时显示一条消息。所有这些类型的条件信息都可以使用AngularJS验证器来显示。

为表单和状态设置样式

我们看到了各种状态的形式(输入):$dirty、$valid等。我们看到如何根据这些条件显示特定的错误消息和禁用按钮,但是如果我们想使用用户界面和CSS强调某些输入字段或表单状态呢?一种选择是与ng-class指令一起使用表单和输入状态,比如myForm.$dirty为真时添加dirty类。但AngularJS提供了一个更容易的选择。

对于每个我们上文描述状态,AngularJS为表单和输入元素来回添加和删除CSS类,如表4-3所示。

表4-3. 表单状态CSS类
表单状态 应用的CSS类
$invalid ng-invalid
$valid ng-valid
$pristine ng-pristine
$dirty ng-dirty

同样,对于每个添加到输入字段的验证器,我们也可以用类似的命名方式的CSS类,如下表4-4所示。

表4-4. 输入状态CSS类
输入状态 应用的CSS类
$invalid ng-invalid
$valid ng-valid
$pristine ng-pristine
$dirty ng-dirty
required ng-valid-required或ng-invalid-required
min ng-valid-min或ng-invalid-min
max ng-valid-max或ng-invalid-max
pattern ng-valid-pattern或ng-invalid-pattern
url ng-valid-url或ng-invalid-url
email ng-valid-email或ng-invalid-email
date ng-valid-date或ng-invalid-date
number ng-valid-number or ng-invalid-number

除了基本的输入状态,AngularJS还需要验证器的名称(数量,最大长度、模式等),根据特定的验证器是否满足需求,相应添加ng-valid-validator_name或ng-invalid-validator_name类。

让我们看一个可以以不同的方式来强调输入的示例:

在这个例子中,我们保留子现有的验证器功能,虽然我们移除特定的错误消息。相反,我们试图做的是使用CSS的类标出所需字段。这是完成的示例:

  • 正确填写字段时,输入框变绿色。这是当CSS类ng-valid应用于我们的输入字段时通过设置背景颜色来完成的。
  • 如果用户开始输入时我们要显示深红色背景,然后撤销它。也就是说,我们要将背景设置为红色,标记为必需的字段,但只有在用户修改字段后。所以我们设置背景颜色是红色的,如果应用

CSS类ng-dirty(标识用户已修改)ng-invalid-minlength(标识用户没有输入足够数量的字符)。

类似地,如果字段是必需的但不是脏的,您可以添加一个CSS类用红色*来显示。从头开始使用这些CSS类的组合(表单和输入状态),您可以轻松使用样式,将所有相关的、可操作的用户界面呈现给用户。

不完全译自《AngularJS-Up and Running》。

发表评论