ANGULARJS表单的错误处理

转载

wx60d4764eb475e 2021-06-30 11:53:16

我们已经讲解能在在表单层面检验的多种类型验证，但个别字段呢？在前面的示例中，我们确保输入字段都是必填字段，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 = "http://riafan.com/libs/angular.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。让我们看看表单改变子什么：

首先，我们为需要验证的两个输入字段添加了name属性，用户名文本命名为uname，pwd密码文本命名为pwd。
然后使用AngularJS的表单绑定能够为每个表单字段找出错误。当我们为任何输入表单添加name属性时，实际上专门为它创建了带有错误状态的模型。
所以对于用户名字段，我们可以通过访问myForm.uname$error.required来检验它有没有填写。同样对于ng-minlength，字段应该是myForm.uname.$error.minlength。对于密码，我们通过myForm.pwd.$error.required来检验该字段是否填写。
类似于表单，我们也通过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