Angular2 set value for formGroup

Question

So I have a complex form for creating an entity and I want to use it for editing as well I am using new angular forms API. I structured the form exactly as the data I retrieve from the database so I want to set the value of the whole form to the data retrieved here is an example to what i want to do:

this.form = builder.group({       b : [ "", Validators.required ],       c : [ "", Validators.required ],       d : [ "" ],       e : [ [] ],       f : [ "" ]     }); this.form.value({b:"data",c:"data",d:"data",e:["data1","data2"],f:data}); 

PS: NgModel doesn't work with new forms api also i don't mind using one way data binding in template as in

<input formControlName="d" value="[data.d]" /> 

that works but it would be a pain in case of the arrays

Answer 1

To set all FormGroup values use, setValue:

this.myFormGroup.setValue({   formControlName1: myValue1,    formControlName2: myValue2 }); 

To set only some values, use patchValue:

this.myFormGroup.patchValue({   formControlName1: myValue1,    // formControlName2: myValue2 (can be omitted) }); 

With this second technique, not all values need to be supplied and fields whos values were not set will not be affected.

Answer 2

You can use form.get to get the specific control object and use setValue

this.form.get(<formControlName>).setValue(<newValue>);