表单状态 class

0
视频
0
完成
0%
进度
0
分钟
0
完成
0%
进度

Angular 提供了一些跟表单状态相关的 css 类,会根据情况应用在表单还有它的元素上面,我们可以使用这些 css 类,动态的去为表单应用一些样式。

再看一下之前我们创建的这个表单,打开浏览器的开发者工具 ... 选择 Elements 选项卡 ... 然后选中这个 form 表单元素 ... 在这个标签上面,应用的 class 有 ng-pristine ,它表示表单还没有被动过 .. 另外还有 ng-valid,还有一个 ng-valid-email ,表示表单没有错误 ... 验证有效 ...

在这个表单元素里面的这个 email 字段上面也用了一些 class,ng-pristine,ng-untouched 等等 ... 下面我们在这个表单里面的 email 字段里输入点东西 ..

注意当我们按下按键以后,form 标签上的 .ng-pristine 这个类就不会了,因为我们已经动过了这个表单,同样,email 字段上的 .ng-pristine 这个类也不见了,换成了 .ng-dirty, .. 另外在 form 标签还有这个 email 字段上面的 .ng-valid 类,会换成 .ng-invalid ,因为现在在这个 email 字段里输入的东西,不符合要求,我们需要输入一个正确的 email 地址 ..

要加上一个 @ 符号 ... 跟着一个域名 .. 现在 .ng-invalid 类又会换成 .ng-valid ,因为验证表单的输入,没有发现错误。

现在这个表单里面只有一个表单元素,如果按下回车的话,就会提交这个表单 ... 这样在这个 form 标签上面,会应用一个 .ng-submitted 类 ...

鼠标点击一下空白的地方,或者按下 tab 键,离开这个 email 字段 ... 这样这个元素上面的 .ng-untouched 类,就会换成 .ng-touched ..

表单状态 class《 AngularJS 基础 》

统计

14696
分钟
0
你学会了
0%
完成

社会化网络

关于

微信订阅号

扫描微信二维码关注宁皓网,每天进步一点