Angular系列教程-第四节

1.表单
Angular 提供了两种不同的方法来通过表单处理用户输入:响应式表单和模板驱动表单。 两者都从视图中捕获用户输入事件、验证用户输入、创建表单模型、修改数据模型,并提供跟踪这些更改的途径

使用’@angular/forms’库中的FormGroup, FormControl,FormArray,FormBuilder 等类构建出的数据对象就是响应式的表单,在响应式的表单中,我们会在数据源里面进行各种操作,像添加校验等,在html文件中使用 formGroup,formGroupName,formControlName等将数据和视图进行绑定(需要引入ReactiveFormsModule)

模板驱动的表单是我们实例化好一个类的数据之后,在html中使用 NgForm 指令后将数据和表单进行绑定,使用[(ngModel)]来将表单的数据和和视图进行双向绑定,NgForm 指令为 form 增补了一些额外特性。 它会控制那些带有 ngModel 指令和 name 属性的元素,监听他们的属性。

总结
响应式表单是动态的,模板驱动表单是固定的

2.响应式表单使用
注册ReactiveFormsModule
组件导入FormControl
模板中注册组件
控件的值(获取setvalue和更新)
formgroup使用
表单提交
更新部分内容(patchValue)
表单验证(导入Validators,设置字段属性)
表单状态(status)
formarray(管理任意数量控件)
表单验证
同步验证器和异步验证器
备注:同步验证先执行,异步验证后执行

3.模板驱动表单使用
导入formcontrol
使用ngModel实现双向绑定
使用模板变量来获取表单

4.内置验证器
min 此验证器要求控件的值大于或等于指定的数字
max 此验证器要求控件的值小于等于指定的数字
required 此验证器要求控件具有非空值
requiredTrue 此验证器要求控件的值为真
email 此验证器要求控件的值能通过 email 格式验证。
minLength 此验证器要求控件值的长度大于等于所指定的最小长度。当使用 HTML5 的 minlength 属性时,此验证器也会生效。
maxLength 此验证器要求控件值的长度小于等于所指定的最大长度。当使用 HTML5 的 maxLength 属性时,此验证器也会生效。
pattern 此验证器要求控件的值匹配某个正则表达式。当使用 HTML5 的 pattern 属性时,它也会生效。

5.指令
组件 — 拥有模板的指令。
结构型指令 — 通过添加和移除 DOM 元素改变 DOM 布局的指令,比如ngfor、ngif
属性型指令 — 改变元素、组件或其它指令的外观和行为的指令,比如ngstyle

6.属性型指令
6.1创建
6.2引入
6.3编写

7.自定义指令
directive

Tagged . Bookmark the permalink.

Comments are closed.