Page 53 - AngularJS权威教程

7.2 表单验证 33

}); 1
}
};
});
2
 $formatters
当绑定的ngModel值发生了变化，并经过$parsers数组中解析器的处理后，这个值会被传递
3
给$formatters流水线。同$parsers数组可以修改表单的合法性状态类似，$formatters中的函
数也可以修改并格式化这些值。
4
比起单纯的验证目的，这些函数更常用来处理视图中的可视变化。例如，假设我们要对某个
值进行格式化。通过$formatters数组可以在这个值上执行过滤器：
5
angular.module('myApp')
.directive('oneToTen', function() {
return { 6
require: '?ngModel',
link: function(scope, ele, attrs, ngModel) {
if (!ngModel) return;
7
ngModel.$formatters.unshift(function(v) {
return $filter('number')(v);
}); 8
}
};
});
9
11. 组合实例
下面我们一起创建一个注册表单。表单中包括用户的名字、邮件地址以及用户名。 10
开始之前，首先看一下我们希望这个表单长成什么样子，如图7-1所示。

在线示例：http://jsbin.com/ePomUnI/5/edit。 11

下面开始定义表单：
12
<form name="signup_form" novalidateng-submit="signupForm()">
<fieldset>
<legend>Signup</legend> 13

<button type="submit" class="button radius">Submit</button>
</fieldset>
</form> 14

15

16

图7-1 注册表单 17

这个表单的名称是signup_form，当表单提交时我们要调用signupForm()。
18
下面添加用户的名字：