表单控件(input, select, textarea )是用来获取用户输入的。表单则是一组有联系的表单控件的集合。
用户能通过表单和表单控件提供验证的服务,知道自己的输入是否合法。这样能让用户交互变得友好,因为用户能通过反馈来修正自己的错误。不过,虽然客户端的验证能够起到很大作用,但也很容易被绕过,所以不能完全依靠客户端验证。 要建立安全的应用,服务器端验证还是必不可少的。
了解AngularJS双向绑定的关键在于了解ngModel指令。这个指令通过动态将model和view互相映射,来实现双向绑定。
为了能美化表单和表单元素,ngModel指令会自动为元素添加以下css类:
一个表单就是一个FormController的实例,表单实例可以通过name属性选择性地公开到作用域中。同样的,一个表单控件也是一个NgModelController的实例,表单控件也能同样的被公开到作用域中。这意味视图能通过绑定的基本功能获取表单或者表单控件的状态。
举个例子:
AngularJS实现了大部分常见的html5表单输入元素(text, number, url, email, radio, checkbox),也实现了很多用于验证的指令(required, pattern, minlength, maxlength, min, max)。
如果想要定义你自己的验证器的话,可以通过在你自己的指令中添加一个验证函数给ngModel的控制器来实现。要想获得控制器的引用,需要在指令中指定依赖,验证函数可以写在两个地方。
举个例子:
上面的例子中,我们创建了两个指令。
AngularJS已经实现了所有基本的HTML表单控件(input,select,textarea),对于大部分情况应该已经够了。但是,你还是可以通过写指令来实现你自己的表单控件。
要和ngModel指令协同工作实现自定义控件,并且实现双向绑定的话,需要:
下面的例子演示了如何添加一个“内容可编辑”的数据双向绑定的元素。
希望你喜欢,并分享我的工作~带你走近AngularJS系列: