Angular4 响应式表单应用以及验证
基础的表单类
添加FormGroup通常，如果有多个FormControl，我们会希望把它们注册进一个父FormGroup中： src/app/hero-detail.component.ts
import { 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>
表单模型概览要想知道表单模型是什么样的，请在hero-detail.component.html的form标签紧后面添加如下代码： src/app/hero-detail.component.html
content_copy
<p>Form value: {{ heroForm.value | json }}</p>
<p>Form status: {{ heroForm.status | json }}</p>
FormBuilder简介现在，我们遵循下列步骤用FormBuilder来把HeroDetailComponent重构得更加容易读写：
src/app/hero-detail.component.ts
import { Component } from '@angular/core';
import { FormBuilder,FormGroup } from '@angular/forms';
export class HeroDetailComponent3 {
heroForm: FormGroup; // <--- heroForm is of type FormGroup
constructor(private fb: FormBuilder) { // <--- inject FormBuilder
this.createForm();
}
createForm() {
this.heroForm = this.fb.group({
name: '',// <--- the FormControl called "name"
});
}
}
FormBuilder.group是一个用来创建FormGroup的工厂方法，它接受一个对象，对象的键和值分别是FormControl的名字和它的定义。 在这个例子中，name控件的初始值是空字符串。
src/app/hero-detail.component.ts
this.heroForm = this.fb.group({
name: ['',Validators.required ],});
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 FormGroup
name: ['',address: this.fb.group({ // <-- the child FormGroup
street: '',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的结构就是表单模型。 组件必须把数据模型中的英雄值复制到表单模型中，这里隐含着两个非常重要的点：
通常只会展现数据模型的一个子集，表单模型的形态越接近数据模型，事情就会越简单，在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: ['',address: this.fb.group({
street: '',zip: ''
}),sidekick: ''
});
在这些模型中有两点显著的差异：
src/app/hero-detail.component.ts
this.heroForm = this.fb.group({
name: ['',address: this.fb.group(new Address()),// <-- a FormGroup with a new address
power: '',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.ts this.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.ts
this.heroForm = this.fb.group({
name: ['',secretLairs: this.fb.array([]),// <-- secretLairs as an empty FormArray
power: '',sidekick: ''
});
把表单的控件名从address改为secretLairs让我们遇到了一个重要问题：表单模型与数据模型不再匹配了。 src/app/hero-detail.component.ts
setAddresses(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 get secretLairs(): FormArray {
return this.heroForm.get('secretLairs') as FormArray;
};
### 显示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.ts
constructor(private fb: FormBuilder) {
this.createForm();
this.logNameChange();
}
保存表单数据### 保存 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 lairs
const 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 values
const 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对象的复本，因此实际上并没有修改原有对象。 ### 丢弃（撤销修改） src/app/hero-detail.component.ts (revert)
revert() { this.ngOnChanges(); }
响应式表单的验证在响应式表单中，真正的源码都在组件类中。我们不应该通过模板上的属性来添加验证器，而应该在组件类中直接把验证器函数添加到表单控件模型上（FormControl）。然后，一旦控件发生了变化，Angular 就会调用这些函数。 验证器函数有两种验证器函数：同步验证器和异步验证器。
注意：出于性能方面的考虑，只有在所有同步验证器都通过之后，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'); }
注意
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,forbiddenNameValidator(/bob/i) // <-- Here's how you pass in the custom validator.
]),Validators.required)
}); （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |