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 {} 来控制样式