angular4更改表单中显示的值_Angular 4 动态表单教程 Reactive Forms教程

动态表单(React Forms)是一种动态构建表单的技术，用于解决有时候手动编写和维护表单所需工作量和时间会过大的问题。特别是在需要编写大量表单时。表单都很相似，而且随着业务和监管需求的迅速变化，表单也要随之变化，这样维护的成本过高，如果我们有了原始的JSON数据就可以动态的生成表单，那就太方便了。

通过动态表单，我们可以建立一个有Angular表单控件树的组件类(component class)，并且将他们绑定到内置表单元素上。

一个FormControl的构造函数接受三个可选参数：初始值、验证器数组、异步验证器数组。

动态表单类的核心概念：

AbstractControl是三个具体类：FormControl、FormGroup、FormArray的抽象类，它提供了通用的行为和属性，比如 observable：

组件必须把数据模型(data model)的值转为表单模型(form model)，这里有两个重要的含义：

1、开发者必须理解如何把数据模型的属性映射到表单模型的属性。

2、用户改变的是表单模型的DOM，而不是数据模型的数据，表单控件永远不会更新数据模型(data model)。

表单和数据模型结构不会完全匹配。你经常在特定屏幕上显示数据模型的子集。但是，如果表单模式的形状接近数据模型的形状，这样做会更容易。

使用setValue和patchValue填充表单模型

setValue

使用setValue，可以可以通过传递其属性与FormGroup后面的表单模型完全匹配的数据对象来一次分配每个表单控件值。

在分配任何表单控件值之前，setValue方法会彻底检查数据对象。

它不会接受与FormGroup结构不匹配的数据对象，或者缺少组中任何控件的值。 这样，如果您有打字错误或嵌套控件错误，它可以返回有用的错误消息。 patchValue将默认失败。

另一方面，setValue将捕获错误并清楚地报告错误。

请注意，很多数据模型(data model)可以直接作为setValue的参数，只要它们的形状类似于组件的FormGroup结构。

patchValue

使用patchValue，您可以通过提供一个键/值对的对象来为仅感兴趣的控件分配值到FormGroup中的特定控件。

使用patchValue，您可以更灵活地应对大量不同的数据和表单模型。 但是与setValue不同，patchValue无法检查缺少的控件值，并且不会引起有用的错误。

When to set form model values (ngOnChanges)

现在你知道如何设置表单模型值。 但是你什么时候设置它们？ 答案取决于组件何时获取数据模型值。

The HeroDetailComponent in this reactive forms sample is nested within a master/detail HeroListComponent (discussed below). The HeroListComponent displays hero names to the user. When the user clicks on a hero, the list component passes the selected hero into the HeroDetailComponent by binding to its hero input property.

例子中的英雄细节组件(HeroDetailComponent) 是嵌套在英雄列表控件(HeroListComponent)中的，英雄列表组件用于展示英雄的名字，当用户点击某个英雄时，列表组件将进入选中的英雄的细节组件中，并将英雄的数据与输入控件绑定。

In this approach, the value ofheroin theHeroDetailComponentchanges every time the user selects a new hero. You should callsetValuein thengOnChangeshook, which Angular calls whenever the inputheroproperty changes as the following steps demonstrate.

在这种方法中，HeroDetailComponent中的英雄的值会在每次用户选择新英雄时发生变化。 应该在ngOnChanges钩子中调用setValue，每当输入的英雄属性按照以下步骤演示时Angular调用。

首先，在hero-detail.component.ts中导入OnChanges和Input符号。

然后，添加 @Input()hero:Hero; 属性。

再将ngOnChanges方法添加到类中，如下所示：ngOnChanges(){

this.heroForm.setValue({

name: this.hero.name,

address: this.hero.addresses[0]||newAddress()

});

}

resetthe form flags

当英雄改变时，您应该重置表单，以便清除来自前一个英雄的控制值，并将状态标志恢复为原始状态。 您可以像这样调用ngOnChanges的顶部的重置。this.heroForm.reset();

reset方法有一个可选的状态值，所以你可以重置标志和控制值。 在内部，reset将参数传递给setValue。 一些重构和ngOnChanges成为这样：ngOnChanges(){

this.heroForm.reset({

name:this.hero.name,

address:this.hero.addresses[0]||newAddress()

});

}

创建 HeroListComponent和 HeroService

HeroDetailComponent是主/详细视图中HeroListComponent的一个嵌套子组件。 他们一起看起来有点像这样：

图 1

HeroListComponent使用注入的HeroService从服务中检索英雄，然后将这些英雄作为一系列按钮呈现给用户。 HeroService模拟HTTP服务，它返回一个可观察的英雄，在短暂的延迟之后解析，既模拟网络延迟，又可视地指出应用程序的必然异步性质。

当用户点击一个英雄时，该组件将其selectedHero属性设置为绑定到HeroDetailComponent的hero输入属性。 HeroDetailComponent会检测到已更改的英雄，并用该英雄的数据值重新设置其形式。

在刷新英雄之前，“刷新”按钮会清除英雄列表和当前所选英雄。

其余的HeroListComponent和HeroService实现细节与理解动态表单无关。 所涉及的技术涵盖在文档的其他地方，包括“英雄之旅”等等。

如果您正在按照此动态表格教程中的步骤进行编码，请根据下面显示的源代码创建相关文件。 注意，hero-list.component.ts导入Observable，最后当hero.service.ts导入从rxjs的Observable，of和delay。 然后返回这里了解表单数组属性。

用 FormArray展现一组 FormGroups

到目前为止，您已经看到FormControls和FormGroups。 FormGroup是一个命名对象，其属性值为FormControls和其他FormGroups。

有时您需要呈现任意数量的控件或组。 例如，英雄可能有零个，一个或任何数量的地址。

Hero.addresses属性是一个Address实例数组。 FormGroup地址可以显示一个地址。 Angular FormArray可以显示一个地址FormGroups的数组。

要访问FormArray类，将其导入到hero-detail.component.ts中：import { Component, Input, OnChanges } from '@angular/core';

import { FormArray, FormBuilder, FormGroup, Validators } from '@angular/forms';

import { Address, Hero, states } from './data-model';

要使用FormArray，请执行以下操作：

1、定义数组中的项(FormControls或FormGroups)。

2、使用从数据模型中的数据创建的项初始化数组。

3、根据用户需要添加和删除项目。

在本指南中，您可以为Hero.addresses定义FormArray，并允许用户添加或修改地址(删除地址是您的家庭作业)。

您需要在HeroDetailComponent构造函数中重新定义表单模型，该方法当前只显示地址FormGroup中的第一个英雄地址。this.heroForm=this.fb.group({

name: ['',Validators.required],

address: this.fb.group (newAddress()),   //

power: '',

sidekick: ''

})

From addressto secret lairs

从地址到秘密的小屋

从用户的角度来看，英雄没有地址。 地址只是凡人。 英雄有秘密的小屋！ 使用secretLairs FormArray定义替换FormGroup定义的地址：this.heroForm=this.fb.group({

name: ['',Validators.required],

secretLairs: this.fb.array([]),//

power: '',

sidekick: ''

});

Changing the form control name fromaddresstosecretLairsdrives home an important point: theform modeldoesn't have to match thedata model.

Obviously there has to be a relationship between the two. But it can be anything that makes sense within the application domain.

Presentationrequirements often differ fromdatarequirements. The reactive forms approach both emphasizes and facilitates this distinction.

将表单控名称从地址更改为secretLairs驱动器回到一个重要的一点：表单模型不必与数据模型相匹配。

显然两者之间有一个关系。 但它可以是任何在应用程序域内有意义的内容。

演示要求往往与数据需求不同。 反应式方法既强调并促进了这种区分。