Angular4笔记——表单状态相关的属性
表单状态字段(FromControl)
touched和untouched
用来判断用户是否访问过一个字段(也就是这个字段是否获取过焦点,如果获取过焦点,touched是true,untouched是false;如果从来没有获取过焦点,touched是false,untouched是true)
这两个状态字段,常用于控制错误信息是否显示
pristine和dirty
如果一个字段的值从来没有被改变过,那么pristine是true,dirty是false;
pending
在表单字段做异步校验时,pending是true
此时,可以在界面上对此异步校验做出提示
针对所有的这些状态字段,Angular都会自动根据其状态为其添加一些样式,你可以通过定义这些样式,来个性化dom元素在不同状态下的外观
以下:
ng-untouched, ng-pristine, ng-invalid
ng-touched, ng-dirty, ng-valid
Angular4笔记——表单状态相关的属性的更多相关文章
- [html5] 学习笔记-表单新增元素与属性
本节讲的是表单元素的form,formaction属性,frommethod,formenctype属性,formtarget,autofocus属性,required,labels属性. 1.for ...
- angular4 Form表单相关
ng4中,有两种方式去声明一个表单 一:Template-Driven Forms - 模板驱动式表单 [引入FormsModule] 1.ngForm赋值 [可以方便的获取表单的值] <f ...
- Angular4——7.表单处理
在Angular中存在两种表单处理方式: 模版驱动式表单 表单的数据模型是通过组件模版中的相关指令来定义的.由于使用这种方式定义表单的数据模型时,我们会受限于HTML的语法,所以,模版驱动方式只适用于 ...
- HTML5表单新增元素与属性
form属性 在html4中,表单的从属元素必须写在表单内部,而在HTML5中,可以把他们书写在任何地方,然后为该元素指定一个form属性,属性值为该表单的id,这样就可以声明该元素从属于指定表单了. ...
- 修改表单元素中placeholder属性样式、清除IE浏览器中input元素的清除图标和眼睛图标
一.修改input元素placeholder属性样式 在做项目的时候,一般表单元素的placeholder属性样式都是使用浏览器默认的,但有时候为了追求设计上的美感需要修表单元素的placeholde ...
- js高级程序设计 笔记 --- 表单
一,基础知识 在html中,表单是form元素,而在js中,表单对应的是HTMLFormElement类型,继承自HTMLElement,其独特的属性和方法有(常见): action:接收请求的URL ...
- [html5] 学习笔记-表单新增的元素与属性(续)
本节主要讲解表单新增元素的controls属性.placeholder属性.List属性.Autocomplete属性.Pattern属性.SelectionDirection属性.Indetermi ...
- JavaScript/Jquery:Validform 验证表单的相关属性解释
当我们写提交表单的时候往往需要验证表单是否填写了内容,是否正确,这个插件可以很方便的完成我们需要的验证! 使用方法: 1.先引用js <script type="text/javasc ...
- HTML5 学习笔记 表单属性
HTML5新的表单属性 HTML5 的form和input 标签添加了几个新的属性 <form>新属性 autocomplete novalidate input 新属性 autocomp ...
随机推荐
- session.cookie.lifetime和session.gc.maxlifetime的关系
session.cookie.lifetime session.cookie.lifetime 默认是0,即浏览器关闭,session失效:修改这个值的作用是修改sessionid以cookie的形式 ...
- 170608、Spring 事物机制总结
spring两种事物处理机制,一是声明式事物,二是编程式事物 声明式事物 1)Spring的声明式事务管理在底层是建立在AOP的基础之上的.其本质是对方法前后进行拦截,然后在目标方法开始之前创建或者加 ...
- AWR之-enq TX - row lock contention的性能故障-转
1 对这一个小时进行AWR的收集和分析,首先,从报告头中看到DB Time达到近500分钟,(DB Time)/Elapsed=8,这个比值偏高: Snap Id Snap Time Sessio ...
- linux彻底删除nginx
卸载 删除 nginx 1.删除nginx,–purge包括配置文件 sudo apt-get --purge remove nginx 1 2.自动移除全部不使用的软件包 sudo apt-get ...
- 2.1 The Object Model -- Classes and Instances(类和实例)
一.Defining Classes(定义类) 1. 定义一个新的Ember类,调用Ember.Object上的extend()方法: example:定义了一个含有say()方法的新的Person类 ...
- 5.3 Components — Passing Properties to A Component
1. 默认情况下,一个组件在它使用的模板范围中没有访问属性. 例如,假想你有一个blog-post组件被用来展示一个blog post: app/templates/components/blog-p ...
- Linux系统——Nginx基础
Nginx是一个开源的,支持高性能.高并发(特别是静态资源)的www服务和代理服务软件,还具有反向代理复杂均衡功能和缓存服务功能,与lvs负载均衡及Haproxy等专业代理软件相比,nginx部署更简 ...
- (27)Cocos2d-x 3.0 Json用法
Cocos2d-x 3.0 加入了rapidjson库用于json解析.位于external/json下. rapidjson 项目地址:http://code.google.com/p/rapidj ...
- ng-深度学习-课程笔记-15: 循环序列模型(Week1)
1 数学符号(Notation) $ x^{<1>}, x^{<2>}, ..., x^{<t>}, ..., x^{<q>} $ 表示一段输入序列x, ...
- ehcache实现页面整体缓存和页面局部缓存
之前写过spring cache和ehcache的基本介绍和注解实现缓存管理,今天记录下web项目的页面缓存技术. 页面缓存是否有必要?. 这样说吧,几乎所有的网站的首页都是访问率最高的,而首页上的数 ...