Angular2表单<2>模型驱动的表单(Model-Driven Forms)
来源:互联网 发布:rhino js引擎 编辑:程序博客网 时间:2024/06/05 13:22
http://codin.im/2016/09/29/angular2-form-model-driven/
在上一篇Angular2表单-模板驱动的表单文章中,介绍了模板驱动的表单,这里就不再赘述。虽然模板驱动的表单使用起来很方便,但是,当你的表单变得越来越复杂,特别是控件之间存在很多数据的交互,例如很常见的购物车,购物车里面会有很多商品,如果是类似淘宝这样的网站,这些商品还需要按照店铺分组;每个商品有单价和数量,每个店铺甚至每个商品可能有一些优惠券可以使用,甚至会有淘宝平台的减满券;当每个商品的单价或数量改变的时候,每个店铺的商品总金额、和总金额都会发生改变。像这种复杂的表单,数据之间的交互非常多,对开发和测试都会非常不方便。如果使用模板驱动的表单,测试是基于浏览器的端对端测试,测试用例也很不好写。对于这种情况,使用Angular2的另一种表单,也就是模型驱动的表单(Model-Driven Forms)会更加方便。
但是,需要说明的是,使用模型驱动的表单,并不是说就不需要写页面,页面模板上的表单也不会自动生成。只是说,我们不需要像模板驱动的表单一样,在页面上设置model、验证器等。
实例
下图是这篇文章使用的实例的界面,跟上一篇介绍模板驱动的表单使用的实例一样:
项目源码可以从github获取,这个项目包含了几个Angular2表单相关的实例,可以使用下面的命令获取本文所对应的代码:
1
git clone https://github.com/Mavlarn/angular2-forms-tutorial
然后进入项目目录,运行下面的命令安装依赖然后运行测试服务器:
1234
cd angular2-forms-tutorialgit checkout model-driven # 检出该文所使用的tagnpm installnpm start
form
我们还是用上一篇文章使用的实例,来创建一个简单的修改个人信息的表单,表单页面如下:
1234567891011121314
<form><label>姓名:</label><input type="text"><label>电话:</label><input type="text"><fieldset><label>城市:</label><input type="text"><label>街道:</label><input type="text"></fieldset><button type="submit">保存</button></form>
同样,为了节省页面篇幅,省略了很多样式,在实例中可以看到使用的bootstrap的样式,例如姓名字段实际上是这样:
123456
<div class="form-group"><label class="col-sm-2 control-label">姓名:</label><div class="col-sm-10"><input class="form-control" type="text"></div></div>
组件
然后,我们的组件是这样:
123456789101112131415161718
import { Component } from '@angular/core';import { FormGroup, FormControl } from '@angular/forms';@Component({selector: 'reactive-form',templateUrl: 'app/reactive-forms/reactive-forms.component.html',styleUrls: ['app/reactive-forms/reactive-forms.component.css']})export class ReactiveFormsComponent {userForm = new FormGroup({name: new FormControl(),mobile: new FormControl(),address: new FormGroup({city: new FormControl(),street: new FormControl()})});}
我们在组件里面,创建了一个FormGroup
类型的对象,他就是对应的页面上的表单数据,其中,address
也是一个group,里面又有2个属性。
绑定组件和表单元素
我们在组件中手动创建了这个表单控件组,里面包含所有的组件,对应页面上的表单元素。但是,我们需要把这个组件中的数据绑定到页面上。我们除了用Angular2的数据绑定的方式绑定这个数据到模板上以外,我们还需要针对表单控件做映射:
1234567891011121314
<form [formGroup]="userForm"><label>姓名:</label><input type="text" formControlName="name"><label>电话:</label><input type="text" formControlName="mobile"><fieldset formGroupName="address"><label>城市:</label><input type="text" formControlName="city"><label>街道:</label><input type="text" formControlName="street"></fieldset><button type="submit">保存</button></form>
首先我们用[formGroup]="userForm"
将页面上的表单的formGroup
(单向)绑定到组件中的userForm
变量上。
然后,通过<input type="text" formControlName="name">
,将里面的表单的输入组件绑定到userForm
里面的name
控件上。在上面的ReactiveFormsComponent
组件中,我们创建了userForm
控件组,里面有一个FormControl
,叫name
。
使用这种绑定方式,我们把页面上的表单元素和组件中代码创建的表单控件关联起来。
简化表单控件创建
在上面的ReactiveFormsComponent
组件中我们创建表单的方式其实也可以使用FormBuilder
简化。同时还可以在新建的FormControl
的时候可以设置初始值已经验证器等,具体看下面的代码:
12345678910111213141516
import { Component, OnInit } from '@angular/core';import { FormGroup, FormControl, FormBuilder, Validators } from '@angular/forms';export class ReactiveFormsComponent implements OnInit {userForm: FormGroup;constructor(private formBuilder: FormBuilder) {}ngOnInit() {this.userForm = this.formBuilder.group({name: ['张三', [Validators.required, Validators.minLength(3)]],mobile: [13800138001, [Validators.required, Validators.minLength(11), Validators.maxLength(11)]],address: this.formBuilder.group({city: ['北京', Validators.required],street: ['朝阳望京...', Validators.required]})});}}
在这个控件中,姓名控件设置了初始值’张三’和2个验证器(Validators.required, Validators.minLength(3)
),手机号的控件也设置了初始值和3个验证器。
页面上显示控件状态
最后,跟’模板驱动的表单’类似,我们还可以在页面上添加验证器和表单控件的状态。只不过,在’模板驱动的表单’中,我们可以使用模板引用变量#name="ngModel"
来创建一个针对姓名控件的引用变量。但是在这里,我们没有一个ngModel
在模板里,所以就不能用这种方式,我们只能使用表单控件的引用来获得所有控件的状态,例如userForm.controls.name.dirty
这样。下面就是针对姓名控件,添加的根据状态显示各种信息的实例:
12345678
<input type="text" formControlName="name"><span *ngIf="userForm.controls.name.pristine">未修改</span><span *ngIf="userForm.controls.name.dirty">已修改</span><span *ngIf="userForm.controls.name.valid">有效</span><div [hidden]="userForm.controls.name.valid||userForm.controls.name.pristine"><p *ngIf="userForm.controls.name.errors?.minlength">姓名最小长度为3</p><p *ngIf="userForm.controls.name.errors?.required">必须输入姓名</p></div>
当然,跟模板驱动的表单一样,这种表单也会根据状态在html元素上添加各种class。当一个控件的值通过验证器验证有效以后,在这个html元素上就会添加一个ng-valid
的class;如果验证失败,就会添加一个ng-invalid
。我们就可以使用css样式来显示不同的状态:
123456789
.ng-valid[required], .ng-valid.required {border-left: 5px solid #42A948; /* green */}.ng-invalid:not(form).ng-invalid:not(fieldset) {border-left: 5px solid #a94442; /* red */}.error-msg {color: red;}
在上面的定义中,我们对验证类型为required
、状态为valid
的控件添加了一个左边绿色显示的样式。但是,实际上这一个样式不会起作用,因为我们的验证器不是在页面模版中添加的,例如在’姓名’是这样:
1
<input type="text" formControlName="name">
我们没有添加一个required
的属性给他,所以ng-valid[required]
这个选择器不会起作用。
响应式处理表单数据
模型驱动表单,之所以又叫响应式表单(Reactive Forms),最重要的原因就是我们可以使用响应式编程来处理表单中的数据。响应式表单的控件提供一个Observables
类型的数据更新对象,我们可以使用Observables
的各种特性来处理表单中数据的改变。
有关Observables
的特性和如何利用它的特性处理表单数据,可以阅读这篇文章《利用Angular2的Observables实现交互控制》。
在这里,我们直接使用它来处理数据更新:
1234567891011121314151617181920212223242526272829303132333435
export class ReactiveFormsComponent implements OnInit {userForm: FormGroup;msg: String;changeMsg: any;constructor(private formBuilder: FormBuilder) {}ngOnInit() {this.userForm = this.formBuilder.group({name: ['张三', [Validators.required, Validators.minLength(3)]],mobile: [13800138001, [Validators.required, Validators.minLength(11), Validators.maxLength(11)]],address: this.formBuilder.group({city: ['北京', Validators.required],street: ['朝阳望京...', Validators.required]})});// 从表单控件中获得地址、城市、街道控件的引用// 地址控件也是一个FormGroup,需要将它转型成FormGroup类型。const addr$ = <FormGroup>this.userForm.controls['address'];const city$ = addr$.controls['city'];const street$ = addr$.controls['street'];city$.valueChanges.debounceTime(1000).distinctUntilChanged().subscribe(cityValue => {this.msg = cityValue + ' 欢迎你!';street$.setValue(cityValue);});this.userForm.valueChanges.subscribe(x => this.changeMsg = { event: 'Form DATA CHANGED', object: x });}reset() {// 我们同样可以使用reset方法来重置数据this.userForm.reset();}}
上面的debounceTime(1000)
是指当用户修改输入的值以后,过1000毫秒才会触发后面的处理方法。distinctUntilChanged()
是指如果用户如果在1000毫秒内,输入了一个字符,又删掉了,那么输入的值应该没有改变,这种情况下,后面的处理方法就不会被触发。subscribe()
就是注册一个处理方法,就是当有数据发生改变的时候,需要出发的方法。在这个方法里,当用户输入了一个新的城市名以后,就会更新街道的值也为这个城市名,同时下面的显示信息也相应改变。
实际上,对于模板驱动的表单的数据更新,我们也可以使用这种响应式的数理方法。只是在之前的实例中,没有使用这种处理方式而已。
引入Observables的操作符
在添加上面的debounceTime(1000)
方法以后,实际上编辑器会报编译错误,是因为我们还需要手动的引入相关的操作符。我们可以把这个引入的定义添加到这个ReactiveFormsComponent
所在的文件中,也可以在这个组件的任意父组件中引入。区别就是,在父组件中引入的话,那么在其他组件中也能够使用。所以,我们就在app.module.ts中引入,这样在所有的组件中都可以使用这些方法。
12
import 'rxjs/add/operator/debounceTime';import 'rxjs/add/operator/distinctUntilChanged';
为什么我们需要一个一个方法的引入呢?因为这样,我们就只需要引入我们用到的方法,不需要的部分就不会被引入。这样在最后打包的时候,不需要的部分不会被打包,就能够减少代码量。
模板驱动和模型驱动表单的区别
看到这里,其实就会发现,这两种表单创建方式,主要有2个区别:
- 数据模型、验证器的定义
使用模型驱动的表单,我们的页面可以很整洁,没有验证器,没有数据绑定,没有onChange
,onBlur
等事件绑定。我们可以在组件代码里订阅数据更新的事件,实现数据之间的交互。 - 是否可以单元测试
目前我们还没有使用任何测试方法,但是,在Angular的最佳实践里,测试是很重要的,它包括2中测试,单元测试以及端到端测试,单元测试可以不依赖浏览器,而端到端测试的执行必须在浏览器里执行。而模型驱动的表单,由于他的数据模型、验证器、交互等都是在组件中,我们可以完全不依赖浏览器就在单元测试里面测试表单的各种逻辑。
所以,当你有一个表单,考虑用哪种表单创建方式的时候,如果这个表单比较简单,甚至不需要测试,那就用模板驱动的表单就可以。如果表单比较复杂,就应该考虑使用模型驱动的表单方式。
- Angular2表单<2>模型驱动的表单(Model-Driven Forms)
- Angular2表单<1>模板驱动的表单(Template-Driven Forms)
- Model Driven Architecture 模型驱动架构
- MDD Model-Driven Developement 模型驱动开发
- struts 的模型驱动,接受表单值
- Introduction to Angular 2 Forms - Template Driven vs Model Driven Forms
- 使用表单forms表单
- 模型驱动架构(MDA,Model Driven Architecture)浅述
- 模型驱动架构(MDA,Model Driven Architecture)浅述
- 模型驱动架构(MDA,Model Driven Architecture)浅述
- Struts2 Action中 两种传值方式 模型驱动Model-Driven和属性驱动Property-Driven小结
- angular2 之 form表单
- Angular2表单验证
- Angular2 表单form
- Angular2 之 Form 表单
- Angular2响应式表单
- angular2--笔记--表单创建
- Angular2 模版表单
- 函数的功能
- Algorithms 4th_1.1 basic programming model
- RBAC模块
- java io,只有OutputStream和Writer
- 关于计算机网络的相关知识
- Angular2表单<2>模型驱动的表单(Model-Driven Forms)
- Linux学习之:七种文件类型
- c语言程序练习二
- SQL左右连接中的on and和on where的区别
- NOIP2014复赛提高组day2(A:无线网络发射器选址 B:寻找道路 C:解方程)
- 共用fragment共用adapter
- WSAGetLastError() 返回的错误
- Hibernate配置文件的编写一
- form表单ajax异步提交数据和文件整理