Angular中响应式表单的三种更新值方法详析

前言

众所周知Angular响应式表单相比较模板驱动表单更大操作性、更易测试性。因此，我更推荐这类表单创造方式。

当一个用于修改用户信息的表单，数据的来源总是来自远程；而对于一个 FormGroup 的创建总在 ngOnInit 中完成。因此，这里会有一个表单更新值的问题。

而通常我们会透过 FormGroup 下的三种方式 setValue、patchValue、reset 将值写入表单当中。

当然，或许我说的这三种方式时你压根就没有做过，那说明在表单上你依赖的是双向绑定 [(ngModel)]，这本身就不是符合 Angular 响应式表单的牛B之处了。因此，在此我们不讨论这种这种方式。下面来一起看看详细的介绍：

一、创建响应式表单

我们模拟一个用户信息修改的表单所需要的字段，可能包括：email、nickname 等。

如果以API的方式与现实字段之间产生一个关联，那么 FormGroup 表示一个表单，FormControl 表示表单中的字段。因此，FormControl 必须包裹在 FromGroup 下面。

下面，我们先简单的构建一个响应式表单。

别忘记导入 ReactiveFormsModule 模块。

@Component({ selector: 'app-validation', template: ` <form [formGroup]="form" (ngSubmit)="_submitForm(form)"> <input type="email" formControlName="email"> <input type="text" formControlName="nickname"> <button type="submit" [disabled]="form.invalid">Submit</button> </form> `})export class UserEditComponent { constructor(private fb: FormBuilder, private route: ActivatedRoute) {}  ngOnInit() { this.form = this.fb.group({  email: ['', Validators.compose([Validators.required, Validators.email])],  nickname: ['', [Validators.required]] });  this.route.params  .switchMap((params: Params) => loadUser(+params['id']))  .subscribe(data => {  // Updating value  }); }  loadUser() { return Observable.of({ email: 'xx@xx.com', nickname: 'cipchk' }).delay(1000); }  _submitForm({ value }) { // Save value }}

以上的这些代码再熟悉不过了。假设 UserEditComponent 是由路由 /user/edit/1 触发，那么会发生几个几件事情。

首先，创建一个空的响应式表单 form。

this.form = this.fb.group({ email: ['', Validators.compose([Validators.required, Validators.email])], nickname: ['', [Validators.required]]});

表单的内容有 email、nickname 两个字段。

然而，HTML中，除了 formGroup、formControlName 的配置以外，也看不到任何有关对表单的校验代码。但，当我们输入一个无效 Email 时 input 会自动加上 ng-invalid 类。

这便是响应式表单的魅力。

现在我们回到正题，将分别针对 setValue、patchValue、reset 三种不同更新表单值实际上会发生什么。