Transforming a JSON into a Reactive form with Form Array : TypeError: cyclic object value-CodePudding

I have a model in JSON and I want to transform it into a reactive form: The model:

  methodologyX = of({
      "name": "Q1",
      "sections": [
        {
          "code": "S1",
          "label": "LS1",
          "subSections": [ 
            {
              "code": "S1-1",
              "label": 'LS1-1',
              "questions": [ 
                {
                  "code": "Q1",
                  "label": "LQ1",
                  "answer": [
                    {
                      "code": "A1",
                      "label": 'LA1',
                    }
                  ],
                }
              ]
            }
          ],
        }
      ]
    });

I'm not sure, but I think the reactive form will be something like this:

constructor(private fb: FormBuilder) {
    this.form = this.fb.group({
          methodology: ["X"],
          name: ["Q1"],
          sections: this.fb.array([
            {
              code: ["S1"],
              label: ['LS1'],
              subSections: this.fb.array([ 
                {
                  code: ["S1-1"],
                  label: ['LS1-1'],
                  questions: this.fb.array([
                    {
                      code: ["Q1"],
                      label: ['LQ1'],
                      answer: this.fb.array([
                        {
                          code: ["A1"],
                          label: ['LA1'],
                        }
                      ]),
                    }
                  ]
                }
              ]),
            }
          ])

        });
}

But when I try to binding the value of this form into the Template, using {{form?.value | json}} I get the error:

TypeError: cyclic object value

CodePudding user response：

Your form arrays also need form controls in them.

Also, you had forgotten a closing parenthesis.

here is a working stackblitz :

https://stackblitz.com/edit/angular-ivy-9sobrn?file=src/app/app.module.ts,src/app/app.component.ts:L24,src/app/app.component.html