一个 input 元素,如果上面用到了 ngModel 指令,并且添加了 name 属性为元素起了名字,这个 input 元素也会包含一个 ngModelController 的实例,并且会用它的名字作为表单上的 ngModelController 实例的一个属性。这样属于表单的控制器实例就可以统一的管理属于它的所有的表单元素了。
下面,我们给 userForm 这个表单去添加一个元素 .. 用一个 input 元素 ... 类型可以是 email ... 保存 .. 在页面上会显示一个文本框,类型是 email ,输出的 userForm 的内容没有什么变化 ... 因为我们还没有给这个元素起名字,而且也没有给它绑定模型 ...
先给它添加一个名字 ... 设置一下 name 属性的值 ... 比如可以叫它 userEmail ... 再用一个 ng-model 来绑定数据,可以叫做 user.email。
<input type="email" name="userEmail" ng-model="user.email">
保存 ... 现在,输出的 userForm 的内容就会发生变化 ... 这里你会看到一个 userEmail ... 它里面又包含了一些东西,$validators,$parsers,$formatters ,这里还有一些已经有值的属性,$untouched,没有碰过,它的值是 true ,表示我们还没有动过这个 Email 字段。
这个 $untouched 跟 $pristine 有点区别,$pristine 表示一点都没有碰过。 我们可以演示一下,在这个文本框里输入一个 email ... 注意现在我还没有离开这个文本框,也就是它还在 fouce,焦点的状态 ... 再看一下 userEmail 里的 $untouched 属性,它的值仍然是 true ,不过 $pristine 的值,已经变成了 false ...
$pristine 还有 $dirty ,在用户一开始与表单交互的时候,它们的值就会发生变化,而 $untouched 和 $touched ,只有在用户离开焦点状态以后,它们的值才会发生变化。
我们再看一下 userForm 的这几个属性,你会发现,$pristine 的值也变成了 false ,因为这个表单里的元素已经被动过了,这样它的 $dirty 的值就会变成 true 。