博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
Angular4的表单
阅读量:5750 次
发布时间:2019-06-18

本文共 2522 字,大约阅读时间需要 8 分钟。

Angular4的表单分为两种,一个是模板式表单,另一种是响应式表单。

首先先讲一下数据模型:数据模型不是任意一种对象,是一种用于存储表单数据的数据结构。
模板式表单
该表单的数据模型是由组件模板上相关的指令定义(隐式创建)的,因为使用了这种方式定义表单的数据模型会受限于html语法,所以只适合用于一些简单的场景。
模板式表单有三个api:ngForm、ngModel、ngModelGroup(这三个api在模板上都可以使用模板本地变量进行实例化,因此可以将该模板本地变量传进控制器)
==>(先讲一下,ngForm、ngModel这两个指令在模板上是直接添加在标签上即可)
首先讲一下ngForm:
ngForm是代表了整个form表单,在创建form表单的时候,angular会自动添加到form标签上(等同于<form ngForm></form>
其工作原理是:创建了ngForm后,angular会隐式创建一个FormGroup类的实例,然后ngForm会寻找其子元素中标有ngModel的标签的值,并添加在FormGroup中。然后页面上即可通过ngForm这个对象访问到表单数据。因为ngForm可以使用模板本地变量引用,故可以使用(ngSubmit)=“xxx(#ngForm)”事件进行传递到控制器。
当然,不一定要在form表单使用ngForm,可以在div等标签内使用,此时需要手动添加指令。
如果不想被Angular接收表单,可以添加ngNoForm指令即可。
ngModel
该指令表示了表单内的一个控件。刚刚说到的ngForm会寻找表单内有ngModel的标签,就是说这个标签。
该标签的工作原理是:添加了该指令后,angular会隐式创建一个FormControl类,用于存储其值。
这个指令是直接添加到标签上

1复制代码

但是还要添加name属性(因为这个ngModel标志的控件的值会被添加到FormGroup中,而FormGroup的参数是个对象,对象必须要有key)。

当然这个指令也可以使用模板本地变量,同样也可以通过该变量获得其值

1复制代码

ngModelGroup

该指令表示的是表单的一部分,即多个ngModel的集合。用于区分开来某些特别的ngModel控件。
其工作原理与ngForm类似,也是隐式创建一个FormGroup类用于存储其包括的控件的值。其在ngForm中的表现为嵌套。
不过他的用法是需要赋值一个名称(用于存储在ngForm中)

响应式表单

使用响应式表单时,通过编写typescript而不是html代码创建一个底层数据模型,在这数据模型定义之后,使用一些特定指令将模板的html代码与数据模型进行连接起来。
所以使用响应式表单分为两步:
(1)编码创建一个底层数据模型;
(2)使用特定的指令将模板的html代码与数据模型进行连接起来。
首先讲一下创建底层数据模型
Angular/forms提供三个类进行创建底层数据模型:FormControl、FormGroup、FormArray

FormControl

这个类是响应式表单的基本单位,也就是每个表单控件都要定义一个该类。

userName:FormControl=new FormControl("aaa")1复制代码

其内的参数表示该控件的初始值

FormGroup

myForm:FormGroup=new FormGroup({})1复制代码

该类可以用于表示整个表单、也可以用于表示部分表单

该类的参数内是一个对象,期内保存了该类包括的控件(FormControl)的值(是一组key:value对)

FormArray

partForm:FormArray=new FormArray([])1复制代码

该类和FormGroup类似,也是一些控件的集合,但是和其区别是,FormArray是表示的是可增长的字段集合,而FormGroup是固定字段集合。

(使用场景:在表单中可能有多个email要添加,此时就可以使用该类进行包括)
其参数值是个数组,所以一般会与*ngFor一起用

再讲一下连接的表单指令

表单指令有两种:属性绑定指令、属性名定义指令
FormGroup—>formGroup—>formGroupName
FormControl—>formControl—>formControlName
FormArray—>null—>formArrayName
(记得一点,对于属性名指令是一定要早formGroup范围内使用)
这些指令都是在模板中使用。
首先先创建一个FormGroup类的数据模型,该数据模型会代表了整个表单。因此在模板中form标签内添加一个属性绑定,即

1复制代码

而该FormGroup类实例的参数–>{},内就是存放该表单内的所有控件的值(也就是FormControl和FormArray的控件)。

然后在定义了formGroup属性的表单内,每个控件都要定义其名字,使用的指令就是FormGroupName、FormControlName、FormArrayName这三种指令。

起始日期:
截止日期:
1234567891011121314151617复制代码

讲一下对于取得FormGroup实例对象内的参数对象内的控件名称对应的值的方法:this.formModel.get(‘emails’);用get()方法

转载于:https://juejin.im/post/5a4104515188257d6929d4bb

你可能感兴趣的文章
使用 SharpSvn 执行 svn 操作的Demo
查看>>
js函数大全
查看>>
hdu 4831 Scenic Popularity(模拟)
查看>>
刷题笔记
查看>>
iOS app exception的解决方案
查看>>
对<<寒江独钓---Windows内核安全编程>>中第3章<<串口过滤>>的改进
查看>>
Mongodb启动命令mongod参数说明
查看>>
TCP&UDP压力测试工具
查看>>
Linux使用Shell脚本实现ftp的自动上传下载(转)
查看>>
卷轴式游戏地图实现
查看>>
[IOI1999]花店橱窗布置(DP路径记录)
查看>>
oracle 导入数据
查看>>
js 闭包 原型
查看>>
首个5G智慧机场落地广州 速度是4G的50倍
查看>>
持续集成是什么
查看>>
JavaScript设计模式之面向对象编程
查看>>
Android 最简单的自定义Dialog之一
查看>>
磨刀不误砍柴 - 配置适合工作学习的桌面环境
查看>>
自己动手写docker-3
查看>>
Java笔记-反射机制(一)
查看>>