美文网首页
Angular Form(一)

Angular Form(一)

作者: 妙啊啦 | 来源:发表于2017-12-12 13:05 被阅读0次

Form 的最高奥义就是获取信息和传递信息

-- 鸠斯沃烁德

在angular德开发环境下,form是个重要的东西,用于获取数据,submit数据。

四个要说的方面:获取数据,submit数据,数据德有效监测,和一些style。

首先,先说button,如果form中有多个button,默认type=submit,除非写上type=button

下面,正题

获取数据

第一,我们就说数据的传递 (ngModel)。

form的基本建立完成之后,要在input里面填写用户信息,但是要在ts文件中获取信息呢?我们该如何做呢!ngModel。在内部加上这个,就起到了数据绑定的效果

1. 单个信息数据绑定: [(ngModel)]="ts参数" 这是input中基本的数据绑定

2. 一次性将整个form传给ts,ts来解析数据:

有两种方法,

1, 在ngSubmit的时候,将#reference = “a name” 传入

2. @ViewChild( 'referenced element') ElementInTsFile, 

第二,submit数据,

见之前button讲的东西

第三,数据的数据的有效监测

angular 传进来的form有很多属性,又一个就是valid, 比如input是required,email的情况下,输入的数据无效,那么,valid是false

第四,数据无效的时候的一些样式 

当数据无效的时候,angular会自动为数据加上ng-invalid, 就可以控制样式,有时,整个form都会加上这样的样式,只要使input.ng-invalid就可以避免这样的问题了。

还有ng-touched class,选中了之后,就会加上ng-touched class, 

一般顺序是

input.ng-invalid-ng-touched {} 来控制样式

相关文章

网友评论

      本文标题:Angular Form(一)

      本文链接:https://www.haomeiwen.com/subject/kgrgixtx.html