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

前言

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

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

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

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

一、创建响应式表单

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

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

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

别忘记导入 ReactiveFormsModule 模块。

@Component({
 selector: 'app-validation',
 template: `
 

 
 
 Submit
 
 `
})
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
 }
}

另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。