Search code examples
angularangular2-forms

Angular2 set value for formGroup


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


Solution

  • 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.