@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
 }
}

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

this.form.patchValue({ nickname: 'cipchk' });

patchValue(value: {[key: string]: any}, options: {onlySelf"htmlcode">

Object.keys({ nickname: 'cipchk' }).forEach(name => { 
 console.log(name); 
});
// [ 'nickname' ]


然后，更新值：


this.controls[name].patchValue(value[name], {onlySelf: true, emitEvent: options.emitEvent});


而 FromControl 实例的 patchValue 和 FromGroup 不同，他只是单纯的更新 FromControle 实例对象中的 value 值。
value 相当于表单实际值，还记得先前HTML中的 formControlName 就是将实例与DOM产生联系，这也就是为什么不需要在DOM中使用双向绑定的原因。
三、setValue


跟 patchValue 有一点不一样，当我们提供一个 FromGroup 中并不存在的字段时，会抛出一个错误。除此之外，与 patchValue 并无不同。


setValue(value: {[key: string]: any}, options: {onlySelf"htmlcode">

_throwIfControlMissing(name: string): void {
 if (!Object.keys(this.controls).length) {
 throw new Error(`
 There are no form controls registered with this group yet. If you're using ngModel,
 you may want to check next tick (e.g. use setTimeout).
 `);
 }
 if (!this.controls[name]) {
 throw new Error(`Cannot find form control with name: ${name}.`);
 }
}


四、reset


正常情况下，表单需要提供一个重置按钮时调用此方法。


reset(formState: any = null, options: {onlySelf"htmlcode">

<button (click)="form.reset({ nickname: 'xx' })">Reset</button>


重置表单后并设置 nickname 默认值为：xx。
结论


每一种不同更新值方式都会有不一样的结果，当我们回头过看开头中留下来的：


// Updating value


如果是你，你会怎么写呢？
总结
以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流，谢谢大家对的支持。

                                
                                

                                    angular,响应式表单,angular,响应式,angular,响应式编程 
                                

                                    标签：
                                        
angular,响应式表单,angular,响应式,angular,响应式编程
                                     

                                
极乐门资源网 Design By www.ioogu.com