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