Setting a value on angular FormGroup does not work

Question

I am working on an angular 10 application

I have a @ng-stack FormGroup (Globally it behaves the same as @angular FormGroup) that I instanciate the following way

 export abstract class AbstractBeanForm {

    static build(route: ActivatedRoute, defaultValue?: Partial<DeepRequired<GlobalIhmBean>> ): FormGroup<DeepRequired<GlobalIhmBean>> {
    
      let formGroup = new FormGroup<DeepRequired<GlobalIhmBean>>({
            property1: new FormControl(""),
            property2: new FormControl(""),
            collection3:  new FormArray<DataIhmBean>([])
        });
      const values3 = [
      { prop1: '2', prop2: '00', prop3: 'P', prop4: 0},
      { prop1: '', prop2: '01', prop3: 'P', prop4: 0},
      { prop1: '', prop2: '03', prop3: 'P', prop4: 0},
      { prop1: '', prop2: '05', prop3: 'P', prop4: 0},
      { prop1: '', prop2: '06', prop3: 'P', prop4: 0},
      { prop1: '', prop2: '07', prop3: 'P', prop4: 0},
      { prop1: '', prop2: '08', prop3: 'P', prop4: 0},
      { prop1: '', prop2: '09', prop3: 'P', prop4: 0}
      ]
      
    let formArray1 = formGroup.get('collection3') as any;
    values3.forEach(function(value) {
      console.log('value');
      console.log(value);
      let formGroupi = new FormGroup({
        prop1: new FormControl(''),
        prop2: new FormControl(''),
        prop3: new FormControl(''),
        prop4: new FormControl(0)
      });
      console.log('formGroupi BEFORE setValue');
      console.log(formGroupi);
      formGroupi.setValue(value);
      console.log('formGroupi AFTER setValue');
      console.log(formGroupi);
      formArray1!.push(formGroupi);
    })
    formGroup.setControl('collection3', formArray1);

the defaultValue has the following collection3 value

collection3: (1) […]
0: {…}
prop1: "2"
prop2: "09"
prop3: "P"
prop4: 0

DataIhmBean is the following

export interface DataIhmBean{
  prop1: string;
  prop2: string;
  prop3: string;
  prop4: number;
}

In the "values3.forEach(function(value) {.." line of code, the first value is as expected { prop1: '2', prop2: '00', prop3: 'P', prop4: 0} (VALUE1)

curiously in the line console.log('formGroupi BEFORE setValue'); console.log(formGroupi);

I have the following value : value: Object { prop1: "2", prop2: "09", prop3: "P", … } while I haven't set the defaultValue

After setting the VALUE1 (formGroupi.setValue(value); (value=VALUE1->{ prop1: '2', prop2: '00', prop3: 'P', prop4: 0}))

still curiously in the line console.log('formGroupi AFTER setValue'); console.log(formGroupi);

I have the following value : value: Object { prop1: "2", prop2: "09", prop3: "P",

It is crazy, I can't set the value of formGroupi. It isn't taken into account I must add that the defaultValue is the value I saved on the form during the previous step Do you have an explanation ? And how can I get out of this issue ?

UPDATED

I did what you said and got the error

TypeError: cyclic object value

at the following line,

  console.log('formGroupi BEFORE setValue');
  console.log(JSON.parse(JSON.stringify(formGroupi )));

flamant flamant · Accepted Answer · 2021-02-19T22:18:36

Finally I found the answer. The logging was wrong because I logged the reference of formGroup and, I don't know why, the reference gave me wrong values while logging the values itselves gave me the right values

Setting a value on angular FormGroup does not work

UPDATED

1 Answers