基础的表单类

• AbstractControl是三个具体表单类的抽象基类。 并为它们提供了一些共同的行为和属性，其中有些是可观察对象（Observable）。
• FormControl 用于跟踪一个单独的表单控件的值和有效性状态。它对应于一个HTML表单控件，比如输入框和下拉框。
• FormGroup用于 跟踪一组AbstractControl的实例的值和有效性状态。 该组的属性中包含了它的子控件。 组件中的顶级表单就是一个FormGroup。
• FormArray用于跟踪AbstractControl实例组成的有序数组的值和有效性状态。

添加FormGroup

通常，如果有多个FormControl，我们会希望把它们注册进一个父FormGroup中：

src/app/hero-detail.component.tsimport { Component }              from '@angular/core';
import { FormControl, FormGroup } from '@angular/forms';    export class HeroDetailComponent2 {heroForm = new FormGroup ({name: new FormControl()});
}

现在我们改完了这个类，该把它映射到模板中了，把hero-detail.component.html改成这样：

src/app/hero-detail.component.html<h2>Hero Detail</h2>
<h3><i>FormControl in a FormGroup</i></h3>
<form [formGroup]="heroForm" novalidate><div class="form-group"><label class="center-block">Name:<input class="form-control" formControlName="name"></label></div>
</form>

• 注意，现在单行输入框位于一个form元素中。<form>元素上的novalidate属性会阻止浏览器使用原生HTML中的表单验证器。
• formGroup是一个响应式表单的指令，它拿到一个现有FormGroup实例，并把它关联到一个HTML元素上。 这种情况下，它关联到的是form元素上的FormGroup实例heroForm。
• 没有父FormGroup的时候，[formControl]="name"也能正常工作，因为该指令可以独立工作，也就是说，不在FormGroup中时它也能用。有了FormGroup，name输入框就需要再添加一个语法formControlName=name，以便让它关联到类中正确的FormControl上。这个语法告诉Angular，查阅父FormGroup（这里是heroForm），然后在这个FormGroup中查阅一个名叫name的FormControl。

表单模型概览

要想知道表单模型是什么样的，请在hero-detail.component.html的form标签紧后面添加如下代码：

src/app/hero-detail.component.htmlcontent_copy
<p>Form value: {{ heroForm.value | json }}</p>
<p>Form status: {{ heroForm.status | json }}</p>

FormBuilder简介

现在，我们遵循下列步骤用FormBuilder来把HeroDetailComponent重构得更加容易读写：

• 明确把heroForm属性的类型声明为FormGroup，稍后我们会初始化它。
• 把FormBuilder注入到构造函数中。
• 添加一个名叫createForm的新方法，它会用FormBuilder来定义heroForm。
• 在构造函数中调用createForm。

src/app/hero-detail.component.tsimport { Component }              from '@angular/core';
import { FormBuilder, FormGroup } from '@angular/forms';export class HeroDetailComponent3 {heroForm: FormGroup; // <--- heroForm is of type FormGroupconstructor(private fb: FormBuilder) { // <--- inject FormBuilderthis.createForm();}createForm() {this.heroForm = this.fb.group({name: '', // <--- the FormControl called "name"});}
}

FormBuilder.group是一个用来创建FormGroup的工厂方法，它接受一个对象，对象的键和值分别是FormControl的名字和它的定义。 在这个例子中，name控件的初始值是空字符串。

Validators.required 验证器

要想让name这个FormControl是必须的，请把FormGroup中的name属性改为一个数组。第一个条目是name的初始值，第二个是required验证器：Validators.required。

src/app/hero-detail.component.ts this.heroForm = this.fb.group({name: ['', Validators.required ],
});

多级FormGroup

用FormBuilder在这个名叫heroForm的组件中创建一个FormGroup，并把它用作父FormGroup。 再次使用FormBuilder创建一个子级FormGroup，其中包括这些住址控件。把结果赋值给父FormGroup中新的address属性：

src/app/hero-detail.component.ts (excerpt)export class HeroDetailComponent5 {heroForm: FormGroup;states = states;constructor(private fb: FormBuilder) {this.createForm();}createForm() {this.heroForm = this.fb.group({ // <-- the parent FormGroupname: ['', Validators.required ],address: this.fb.group({ // <-- the child FormGroupstreet: '',city: '',state: '',zip: ''}),power: '',sidekick: ''});}
}

在hero-detail.component.html中，把与住址有关的FormControl包裹进一个div中。 往这个div上添加一个formGroupName指令，并且把它绑定到"address"上。 这个address属性是一个FormGroup，它的父FormGroup就是heroForm：

src/app/hero-detail.component.html (address)<div formGroupName="address" class="well well-lg"><h4>Secret Lair</h4><div class="form-group"><label class="center-block">Street:<input class="form-control" formControlName="street"></label></div><div class="form-group"><label class="center-block">City:<input class="form-control" formControlName="city"></label></div><div class="form-group"><label class="center-block">State:<select class="form-control" formControlName="state"><option *ngFor="let state of states" [value]="state">{{state}}</option></select></label></div><div class="form-group"><label class="center-block">Zip Code:<input class="form-control" formControlName="zip"></label></div>
</div>

查看FormControl的属性

可以使用.get()方法来提取表单中一个单独FormControl的状态。 我们可以在组件类中这么做，或者通过往模板中添加下列代码来把它显示在页面中，就添加在{{form.value | json}}插值表达式的紧后面：

src/app/hero-detail.component.html<p>Name value: {{ heroForm.get('name').value }}</p>
<p>Street value: {{ heroForm.get('address.street').value}}</p>

数据模型与表单模型

来自服务器的hero就是数据模型，而FormControl的结构就是表单模型。

组件必须把数据模型中的英雄值复制到表单模型中，这里隐含着两个非常重要的点：

• 开发人员必须理解数据模型是如何映射到表单模型中的属性的
• 户修改时的数据流是从DOM元素流向表单模型的，而不是数据模型，表单控件永远不会修改数据模型

通常只会展现数据模型的一个子集，表单模型的形态越接近数据模型，事情就会越简单，在HeroDetailComponent中，这两个模型是非常接近的，data-model.ts中的Hero定义：

export class Hero {id = 0;name = '';addresses: Address[];
}export class Address {street = '';city   = '';state  = '';zip    = '';
}

组件的FormGroup定义：

src/app/hero-detail.component.ts this.heroForm = this.fb.group({name: ['', Validators.required ],address: this.fb.group({street: '',city: '',state: '',zip: ''}),power: '',sidekick: ''
});

在这些模型中有两点显著的差异：

• Hero有一个id。表单模型中则没有，因为我们通常不会把主键展示给用户
• Hero有一个住址数组。这个表单模型只表示了一个住址
  重构一下address这个FormGroup定义，来让它更简洁清晰，代码如下：

src/app/hero-detail.component.ts this.heroForm = this.fb.group({name: ['', Validators.required ],address: this.fb.group(new Address()), // <-- a FormGroup with a new addresspower: '',sidekick: ''
});

使用setValue和patchValue来操纵表单模型

setValue 方法

借助setValue，我们可以立即设置每个表单控件的值，只要把与表单模型的属性精确匹配的数据模型传进去就可以了

src/app/hero-detail.component.ts this.heroForm.setValue({name:    this.hero.name,address: this.hero.addresses[0] || new Address()
});

setValue方法会在赋值给任何表单控件之前先检查数据对象的值。

它不会接受一个与FormGroup结构不同或缺少表单组中任何一个控件的数据对象。 这种方式下，如果我们有什么拼写错误或控件嵌套的不正确，它就能返回一些有用的错误信息。 patchValue会默默地失败。

而setValue会捕获错误，并清晰的报告它。

注意，你几乎可以把这个hero用作setValue的参数，因为它的形态与组件的FormGroup结构是非常像的。

我们现在只能显示英雄的第一个住址，不过我们还必须考虑hero完全没有住址的可能性。 下面的例子解释了如何在数据对象参数中对address属性进行有条件的设置：

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

patchValue 方法

借助patchValue，我们可以通过提供一个只包含要更新的控件的键值对象来把值赋给FormGroup中的指定控件，这个例子只会设置表单的name控件：

this.heroForm.patchValue({name: this.hero.name
});

借助patchValue，我们可以更灵活地解决数据模型和表单模型之间的差异。 但是和setValue不同，patchValue不会检查缺失的控件值，并且不会抛出有用的错误信息。

什么时候设置表单的模型值（ngOnChanges）

什么时候设置表单的模型值取决于组件何时得到数据模型的值

HeroListComponent组件把英雄的名字显示给用户,当用户点击一个英雄时，列表组件把所选的英雄通过输入属性hero传给HeroDetailComponent：

hero-list.component.html (simplified)<nav><a *ngFor="let hero of heroes | async" (click)="select(hero)">{{hero.name}}</a>
</nav><div *ngIf="selectedHero"><app-hero-detail [hero]="selectedHero"></app-hero-detail>
</div>

这种方式下，每当用户选择一个新英雄时，HeroDetailComponent中的hero值就会发生变化。 我们可以在ngOnChanges钩子中调用setValue，就像例子中所演示的那样， 每当输入属性hero发生变化时，Angular就会调用它。

src/app/hero-detail.component.ts (ngOnchanges)ngOnChanges()this.heroForm.setValue({name:    this.hero.name,address: this.hero.addresses[0] || new Address()});
}

重置表单的标识

我们应该在更换英雄的时候重置表单，以便来自前一个英雄的控件值被清除，并且其状态被恢复为pristine（原始）状态。 我们可以在ngOnChanges的顶部调用reset，就像这样：

src/app/hero-detail-7.component.tsthis.heroForm.reset();

reset方法有一个可选的state值，让我们能在重置状态的同时顺便设置控件的值。 在内部实现上，reset会把该参数传给了setValue。 略微重构之后，ngOnChanges会变成这样：

src/app/hero-detail.component.ts (ngOnchanges - revised)ngOnChanges() {this.heroForm.reset({name: this.hero.name,address: this.hero.addresses[0] || new Address()});
}

使用FormArray来表示FormGroup数组

src/app/hero-detail.component.tsthis.heroForm = this.fb.group({name: ['', Validators.required ],secretLairs: this.fb.array([]), // <-- secretLairs as an empty FormArraypower: '',sidekick: ''
});

把表单的控件名从address改为secretLairs让我们遇到了一个重要问题：表单模型与数据模型不再匹配了。
### 初始化FormArray型的secretLairs
下面的setAddresses方法把secretLairs数组替换为一个新的FormArray，使用一组表示英雄地址的FormGroup来进行初始化：

src/app/hero-detail.component.tssetAddresses(addresses: Address[]) {const addressFGs = addresses.map(address => this.fb.group(address));const addressFormArray = this.fb.array(addressFGs);this.heroForm.setControl('secretLairs', addressFormArray);
}

注意，我们使用FormGroup.setControl方法，而不是setValue方法来设置前一个FormArray。 我们所要替换的是控件，而不是控件的值。

### 获取FormArray
使用FormGroup.get方法来获取到FormArray的引用：

get secretLairs(): FormArray {return this.heroForm.get('secretLairs') as FormArray;
};

### 显示FormArray
诀窍在于要知道如何编写*ngFor。主要有三点：

• 在*ngFor的<div>之外套上另一个包装<div>，并且把它的formArrayName指令设为"secretLairs"。 这一步为内部的表单控件建立了一个FormArray型的secretLairs作为上下文，以便重复渲染HTML模板。
• 这些重复条目的数据源是FormArray.controls而不是FormArray本身。 每个控件都是一个FormGroup型的地址对象，与以前的模板HTML所期望的格式完全一样。
• 每个被重复渲染的FormGroup都需要一个独一无二的formGroupName，它必须是FormGroup在这个FormArray中的索引。 我们将复用这个索引，以便为每个地址组合出一个独一无二的标签。

src/app/hero-detail.component.html (excerpt)<div formArrayName="secretLairs" class="well well-lg"><div *ngFor="let address of secretLairs.controls; let i=index" [formGroupName]="i" ><!-- The repeated address template --><h4>Address #{{i + 1}}</h4><div style="margin-left: 1em;"><div class="form-group"><label class="center-block">Street:<input class="form-control" formControlName="street"></label></div><div class="form-group"><label class="center-block">City:<input class="form-control" formControlName="city"></label></div><div class="form-group"><label class="center-block">State:<select class="form-control" formControlName="state"><option *ngFor="let state of states" [value]="state">{{state}}</option></select></label></div><div class="form-group"><label class="center-block">Zip Code:<input class="form-control" formControlName="zip"></label></div></div><br><!-- End of the repeated address template --></div>
</div>

### 把新的address添加到FormArray中

addLair() {this.heroForm.get('secretLairs').push(this.fb.group(new Address()));
}

监视控件的变化

每当用户在父组件HeroListComponent中选取了一个英雄，Angular就会调用一次ngOnChanges。 选取英雄会修改输入属性HeroDetailComponent.hero。

当用户修改英雄的名字或秘密小屋时，Angular并不会调用ngOnChanges。 幸运的是，我们可以通过订阅表单控件的属性之一来了解这些变化，此属性会发出变更通知。

有一些属性，比如valueChanges，可以返回一个RxJS的Observable对象。 要监听控件值的变化，我们并不需要对RxJS的Observable了解更多。

添加下列方法，以监听姓名这个FormControl中值的变化:

src/app/hero-detail.component.ts (logNameChange)nameChangeLog: string[] = [];
logNameChange() {const nameControl = this.heroForm.get('name');nameControl.valueChanges.forEach((value: string) => this.nameChangeLog.push(value));
}

在构造函数中调用它，就在创建表单的代码之后：

src/app/hero-detail-8.component.tsconstructor(private fb: FormBuilder) {this.createForm();this.logNameChange();
}

保存表单数据

### 保存
当用户提交表单时，HeroDetailComponent会把英雄实例的数据模型传给所注入进来的HeroService的一个方法来进行保存:

src/app/hero-detail.component.ts (onSubmit)onSubmit() {this.hero = this.prepareSaveHero();this.heroService.updateHero(this.hero).subscribe(/* error handling */);this.ngOnChanges();
}

原始的hero中有一些保存之前的值，用户的修改仍然是在表单模型中。 所以我们要根据原始英雄（根据hero.id找到它）的值组合出一个新的hero对象，并用prepareSaveHero助手来深层复制变化后的模型值。

src/app/hero-detail.component.ts (prepareSaveHero)prepareSaveHero(): Hero {const formModel = this.heroForm.value;// deep copy of form model lairsconst secretLairsDeepCopy: Address[] = formModel.secretLairs.map((address: Address) => Object.assign({}, address));// return new `Hero` object containing a combination of original hero value(s)// and deep copies of changed form model valuesconst saveHero: Hero = {id: this.hero.id,name: formModel.name as string,// addresses: formModel.secretLairs // <-- bad!addresses: secretLairsDeepCopy};return saveHero;
}

地址的深层复制

我们已经把formModel.secretLairs赋值给了saveHero.addresses（参见注释掉的部分）， saveHero.addresses数组中的地址和formModel.secretLairs中的会是同一个对象。 用户随后对小屋所在街道的修改将会改变saveHero中的街道地址。

但prepareSaveHero方法会制作表单模型中的secretLairs对象的复本，因此实际上并没有修改原有对象。

### 丢弃（撤销修改）
丢弃很容易。只要重新执行ngOnChanges方法就可以拆而，它会重新从原始的、未修改过的hero数据模型来构建出表单模型：

src/app/hero-detail.component.ts (revert)revert() { this.ngOnChanges(); }

响应式表单的验证

在响应式表单中，真正的源码都在组件类中。我们不应该通过模板上的属性来添加验证器，而应该在组件类中直接把验证器函数添加到表单控件模型上（FormControl）。然后，一旦控件发生了变化，Angular 就会调用这些函数。

验证器函数

有两种验证器函数：同步验证器和异步验证器。

• 同步验证器函数接受一个控件实例，然后返回一组验证错误或null。我们可以在实例化一个FormControl时把它作为构造函数的第二个参数传进去。
• 异步验证器函数接受一个控件实例，并返回一个承诺（Promise）或可观察对象（Observable），它们稍后会发出一组验证错误或者null。我们可以在实例化一个FormControl时把它作为构造函数的第三个参数传进去。

注意：出于性能方面的考虑，只有在所有同步验证器都通过之后，Angular 才会运行异步验证器。当每一个异步验证器都执行完之后，才会设置这些验证错误。

内置验证器

模板驱动表单中可用的那些属性型验证器（如required、minlength等）对应于Validators类中的同名函数。要想查看内置验证器的全列表，参见 API 参考手册中的Validators部分。

reactive/hero-form-reactive.component.ts (validator functions)ngOnInit(): void {this.heroForm = new FormGroup({'name': new FormControl(this.hero.name, [Validators.required,Validators.minLength(4),forbiddenNameValidator(/bob/i) // <-- Here's how you pass in the custom validator.]),'alterEgo': new FormControl(this.hero.alterEgo),'power': new FormControl(this.hero.power, Validators.required)});
}get name() { return this.heroForm.get('name'); }get power() { return this.heroForm.get('power'); }

注意

• name控件设置了两个内置验证器：Validators.required 和 Validators.minLength(4)。
• 由于这些验证器都是同步验证器，因此我们要把它们作为第二个参数传进去。
• 可以通过把这些函数放进一个数组后传进去，可以支持多重验证器。
• 这个例子添加了一些getter方法。在响应式表单中，我们通常会通过它所属的控件组（FormGroup）的get方法来访问表单控件，但有时候为模板定义一些getter作为简短形式。

reactive/hero-form-reactive.component.html (name with error msg)<input id="name" class="form-control"formControlName="name" required ><div *ngIf="name.invalid && (name.dirty || name.touched)"class="alert alert-danger"><div *ngIf="name.errors.required">Name is required.</div><div *ngIf="name.errors.minlength">Name must be at least 4 characters long.</div><div *ngIf="name.errors.forbiddenName">Name cannot be Bob.</div>
</div>

自定义验证器

shared/forbidden-name.directive.ts (forbiddenNameValidator)/** A hero's name can't match the given regular expression */
export function forbiddenNameValidator(nameRe: RegExp): ValidatorFn {return (control: AbstractControl): {[key: string]: any} => {const forbidden = nameRe.test(control.value);return forbidden ? {'forbiddenName': {value: control.value}} : null;};
}

这个函数实际上是一个工厂，它接受一个用来检测指定名字是否已被禁用的正则表达式，并返回一个验证器函数。

在本例中，禁止的名字是“bob”； 验证器会拒绝任何带有“bob”的英雄名字。 在其他地方，只要配置的正则表达式可以匹配上，它可能拒绝“alice”或者任何其他名字。

forbiddenNameValidator工厂函数返回配置好的验证器函数。 该函数接受一个Angular控制器对象，并在控制器值有效时返回null，或无效时返回验证错误对象。 验证错误对象通常有一个名为验证秘钥（forbiddenName）的属性。其值为一个任意词典，我们可以用来插入错误信息

添加响应式表单

在响应式表单组件中，添加自定义验证器相当简单。你所要做的一切就是直接把这个函数传给 FormControl 。

reactive/hero-form-reactive.component.ts (validator functions)this.heroForm = new FormGroup({'name': new FormControl(this.hero.name, [Validators.required,Validators.minLength(4),forbiddenNameValidator(/bob/i) // <-- Here's how you pass in the custom validator.]),'alterEgo': new FormControl(this.hero.alterEgo),'power': new FormControl(this.hero.power, Validators.required)
});