Angular 4笔记——表单

表单,以下几个指令

第一 对象绑定 即通过 #xxx="ngForm" 获得form的引用 通过value属性获取表单内容对象,valid属性获取是否有效,每一个input也可以通过#xxx="ngModel" 获得对应input的引用 同样valid获取是否验证成功


表单验证

表单验证常用了require minlength maxlength之类的百度一下就好 放在input上

form事件绑定

(ngSubmit)事件 一般ide不会提示,但是写出来后就会看到 是正确的

对应的每一个input上都可以通过[(ngModel)]="xxx"指定属性绑定到内部的某个属性

需要注意的是一般 ngModel 可以直接放到标签里,而不绑定某个属性,这样就直接同步到Form的value对象里以name为键

总的来说这几个指令

ngModel表示生效 [(ngModel)]="xxx" 表示绑定到属性(双向)

ngSubmit为提交事件

#xxx="ngForm"表示对Form的引用 #xxx="ngModel"表示对一个input的引用

ngModelGroup表示子节点为一个“组”,可以用任何有子节点的标签上,一般和fieldset配合使用,语义化

表单状态

表单控件有状态 比如是否验证成功,不同状态会附加不同的class到标签上,这样就可以通过自定义相应类的样式进行自定义反应

最常用的是 ng-valid 和ng-invalid表示验证成功和未成功

一般来说,需要注意下面几种状态:

valid - 表单控件有效

invalid - 表单控件无效

pristine - 表单控件值未改变

dirty - 表单控件值已改变

touched - 表单控件已被访问过

untouched - 表单控件未被访问过

 需要注意 touch 表示访问“过”,就是点了一下后又点了别的地方

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 版本:Angular 5.0.0-alpha 表单是商业应用的支柱,我们用它来执行登录、求助、下单、预订机票、安排...
    soojade阅读 1,291评论 0 1
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 134,891评论 18 139
  • 细说 Angular 2+ 的表单(二):响应式表单 摘要 在企业应用开发时,表单是一个躲不过去的事情,和面向消费...
    接灰的电子产品阅读 5,840评论 8 28
  • HTML表单 在HTML中,表单是 ... 之间元素的集合,它们允许访问者输入文本、选择选项、操作对象等等,然后将...
    兰山小亭阅读 3,439评论 2 14
  • Angular 4.x 中有两种表单: Template-Driven Forms - 模板驱动式表单 (类似于...
    semlinker阅读 1,008评论 0 2