表单控件(input, select, textarea )是用来获取用户输入的。表单则是一组有联系的表单控件的集合。
用户能通过表单和表单控件提供验证的服务,知道自己的输入是否合法。这样能让用户交互变得友好,因为用户能通过反馈来修正自己的错误。不过,虽然客户端的验证能够起到很大作用,但也很容易被绕过,所以不能完全依靠客户端验证。 要建立安全的应用,服务器端验证还是必不可少的。
了解AngularJS双向绑定的关键在于了解ngModel指令。这个指令通过动态将model和view互相映射,来实现双向绑定。
为了能美化表单和表单元素,ngModel指令会自动为元素添加以下css类:
ng-valid
ng-invalid
ng-pristine
ng-dirty
一个表单就是一个FormController的实例,表单实例可以通过name属性选择性地公开到作用域中。同样的,一个表单控件也是一个NgModelController的实例,表单控件也能同样的被公开到作用域中。这意味视图能通过绑定的基本功能获取表单或者表单控件的状态。
只有当表单发生改变时,重置按钮才会被显示出来。
只有当表单有改变并且改变的值都是合法的,保存按钮才会被显示出来。
能自定义user.email和user.agree的错误信息。
举个例子:
<!doctype html> <html ng-app> <head> <script src="https://code.angularjs.org/angular-1.0.2.min.js"></script> <script> function Controller($scope) { $scope.master= {}; $scope.update = function(user) { $scope.master= angular.copy(user); }; $scope.reset = function() { $scope.user = angular.copy($scope.master); }; $scope.isUnchanged = function(user) { return angular.equals(user, $scope.master); }; $scope.reset(); } </script> </head> <body> <div ng-controller="Controller"> <form novalidate> //novalidate是用来屏蔽浏览器本身的验证功能的。 Name: <input type="text" ng-model="user.name" required /><br /> //required,此输入框必须有内容 E-mail: <input type="email" ng-model="user.email" required/><br /> <div ng-show="form.uEmail.$dirty && form.uEmail.$invalid">Invalid: //此div,如果form表中的name为uEmail的input元素中的内容违法或者是脏数据,那么就显示出来。 <span ng-show="form.uEmail.$error.required">Tell us your email.</span> //如果错误信息是由required引起的,就显示此span <span ng-show="form.uEmail.$error.email">This is not a valid email.</span> //如果错误信息是由里面的内容不合法引起的,就显示此span </div> Gender: <input type="radio" ng-model="user.gender" value="male" />male <input type="radio" ng-model="user.gender" value="female" />female<br /> <input type="checkbox" ng-model="user.agree" required /> I agree: <input ng-show="user.agree" type="text" ng-model="user.agreeSign" required /><br /> <div ng-show="!user.agree || !user.agreeSign">Please agree and sign.</div> <button ng-click="reset()" ng-disabled="isUnchanged(user)">RESET</button> <button ng-click="update(user)" ng-disabled="form.$invalid || isUnchanged(user)">SAVE</button> //如果整个form表单没有通过验证或者form表单中的内容没有发生改变,此按钮就不可点击 </form> </div> </body> </html>
AngularJS实现了大部分常见的html5表单输入元素(text, number, url, email, radio, checkbox),也实现了很多用于验证的指令(required, pattern, minlength, maxlength, min, max)。
如果想要定义你自己的验证器的话,可以通过在你自己的指令中添加一个验证函数给ngModel的控制器来实现。要想获得控制器的引用,需要在指令中指定依赖,验证函数可以写在两个地方。
模型到视图的更新中- 只要绑定的模型改变了,NgModelController#$formatters数组中的函数就会被轮流调用,所以每一个函数都有机会对数据进行格式化,当然你也可以通过NgModelController#$setValidity来改变表单的验证状态。
视图到模型的更新中- 相同的,只要用户与表单交互了,NgModelController#$setViewValue就会被调用。 这次是NgModelController#$parsers数组中的函数会被依次调用,每个函数都有机会来改变值或者通过NgModelController#$setValidity来改变表单的验证状态。下面的例子,使用的是这个。
举个例子: