angular的响应式表单

 

响应式表单:ts代码中要引入ReactiveFormsModule。

 

响应式表单涉及到的类,命令。

其中类有三个,这三个类跟后面五个指令是呼应的,响应式表单的原理就是根据模板要显示的内容在ts代码中构建好代码模型,代码模型的构建就是运用这三个类。

其中命令有右边的五个,响应式表单命令都是以form开头,其中以name结尾的命令在模板中使用时,必须在formGroup的范围中。以name结尾的命令在模板中使用时,不用[]属性绑定的符号也能是实现属性绑定同样的功能,但是formControl与formGroup是需要[]属性绑定符号的。

在模板中使用的案例如下:

 

使用[formGroup]=“”表明在使用响应式表单,而不是模板式表单。

其中ts代码中,可以用FormBuilder类来简化:

 

 

以下也是类似的案例。

 

在第一行代码中,使用[formGroup]=“”表明在使用响应式表单,而不是模板式表单。紫色字体的部分(除开index)都是在ts代码中定义的变量,由于let i= index的特殊性,所以在它下面一行的代码中给formControlName使用了[]属性绑定符号,因为i变量不是来自ts中。

 

formGroupName与formArrayName:

formGroupName不能动态的增加项目,后者则可以动态的添加,如上面代码中所示,可以动态添加邮件的条目。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值