Return to Question

I have implemented a temporary solution until angular2 support form updateValue

initFormGroup(form: FormGroup, data: any) {
    for(var key in form.controls) {
      console.log(key);
      if(form.controls[key] instanceof FormControl) {
        if(data[key]){
          let control = <FormControl>form.controls[key];
          this.initFormControl(control,data[key]);
        }
      } else if(form.controls[key] instanceof FormGroup) {
        if(data[key]){
          this.initFormGroup(<FormGroup>form.controls[key],data[key]);
        }
      } else if(form.controls[key] instanceof FormArray) {
        var control = <FormArray>form.controls[key];
        if(data[key])
        this.initFormArray(control, data[key]);
      }
    }
  }
  initFormArray(array: FormArray, data: Array<any>){
    var clone = array.controls[0];
    array.removeAt(0);
    for(var idx in data) {
      array.push(_.cloneDeep(clone));
      if(clone instanceof FormGroup)
        this.initFormGroup(<FormGroup>array.controls[idx], data[idx]);
      else if(clone instanceof FormControl)
        this.initFormControl(<FormControl>array.controls[idx], data[idx]);
      else if(clone instanceof FormArray)
        this.initFormArray(<FormArray>array.controls[idx], data[idx]);
    }
  }
  initFormControl(control: FormControl, value:any){
    control.updateValue(value);
  }

usage:

this.initFormGroup(this.form, {b:"data",c:"data",d:"data",e:["data1","data2"],f:data});

note: form and data must have the same structure

I have implemented a temporary solution until angular2 support form updateValue

initFormGroup(form: FormGroup, data: any) {
    for(var key in form.controls) {
      console.log(key);
      if(form.controls[key] instanceof FormControl) {
        if(data[key]){
          let control = <FormControl>form.controls[key];
          this.initFormControl(control,data[key]);
        }
      } else if(form.controls[key] instanceof FormGroup) {
        if(data[key]){
          this.initFormGroup(<FormGroup>form.controls[key],data[key]);
        }
      } else if(form.controls[key] instanceof FormArray) {
        var control = <FormArray>form.controls[key];
        if(data[key])
        this.initFormArray(control, data[key]);
      }
    }
  }
  initFormArray(array: FormArray, data: Array<any>){
    var clone = array.controls[0];
    array.removeAt(0);
    for(var idx in data) {
      array.push(_.cloneDeep(clone));
      if(clone instanceof FormGroup)
        this.initFormGroup(<FormGroup>array.controls[idx], data[idx]);
      else if(clone instanceof FormControl)
        this.initFormControl(<FormControl>array.controls[idx], data[idx]);
      else if(clone instanceof FormArray)
        this.initFormArray(<FormArray>array.controls[idx], data[idx]);
    }
  }
  initFormControl(control: FormControl, value:any){
    control.updateValue(value);
  }

usage:

this.initFormGroup(this.form, {b:"data",c:"data",d:"data",e:["data1","data2"],f:data});

note: form and data must have the same structure

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

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